Tab

The Tab component allows for the organization of UI into separate sections, where each tab represents distinct content. The component offers customization for visual styles such as color, size, radius, and contrast.

Report Issue Github

Usage

Basic Tabs

Here's a basic setup with three tabs:


<Tab.Root defaultValue="tab1">
  <Flex direction="column" space="4">
    <Tab.List>
      <Tab.Trigger value="tab1">Tab 1</Tab.Trigger>
      <Tab.Trigger value="tab2">Tab 2</Tab.Trigger>
      <Tab.Trigger value="tab3">Tab 3</Tab.Trigger>
    </Tab.List>
    <Tab.List justify="start" variant="solid" highContrast>
      <Tab.Trigger value="tab1">Tab 1</Tab.Trigger>
      <Tab.Trigger value="tab2">Tab 2</Tab.Trigger>
      <Tab.Trigger value="tab3">Tab 3</Tab.Trigger>
    </Tab.List>
  </Flex>
</Tab.Root>

Styled Tabs

A setup with customized tabs using size, color, and radius.


<Tab.Root defaultValue="tab1">
  <Tab.List justify="start" variant="solid" shadow="3" size="small" color="indigo" radius="full">
    <Tab.Trigger value="tab1">Tab 1</Tab.Trigger>
    <Tab.Trigger value="tab2">Tab 2</Tab.Trigger>
    <Tab.Trigger value="tab3">Tab 3</Tab.Trigger>
  </Tab.List>
  <Container>
    <Row>
      <Col xs={24}>
        <Tab.Content value="tab1">
          <Typography.Text> Tab 1 content</Typography.Text>
        </Tab.Content>
        <Tab.Content value="tab2">
          <Typography.Text> Tab 2 content</Typography.Text>
        </Tab.Content>
        <Tab.Content value="tab3">
          <Typography.Text> Tab 3 content</Typography.Text>
        </Tab.Content>
      </Col>
    </Row>
  </Container>
</Tab.Root>

Event Handling

You can also handle click events of individual tabs.


<Tab.Root defaultValue="tab1">
  <Tab.List highContrast>
    <Tab.Trigger value="tab1" onClick={() => alert('Tab 1 clicked!')}>
      Tab 1
    </Tab.Trigger>
    <Tab.Trigger value="tab2" onClick={() => alert('Tab 2 clicked!')}>
      Tab 2
    </Tab.Trigger>
  </Tab.List>
  <Container>
    <Row>
      <Col xs={24}>
        <Tab.Content value="tab1">
          <Typography.Text> Tab 1 content</Typography.Text>
        </Tab.Content>
        <Tab.Content value="tab2">
          <Typography.Text> Tab 2 content</Typography.Text>
        </Tab.Content>
      </Col>
    </Row>
  </Container>
</Tab.Root>

API

Props

RootProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`defaultValue`	`string`	-	Yes

ListProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'solid' \| 'outlined'`	-	-
`block`	`boolean`	-	-
`justify`	`'center' \| 'end' \| 'space-between' \| 'start'`	`'center'`	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`highContrast`	`boolean`	-	-

TriggerProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`value`	`string`	-	Yes
`onClick`	`() => void`	-	-

ContentProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`value`	`string`	-	Yes

Progress Linear

Table