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.

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

PropTypeDefaultRequired
classNamestring--
styleCSSProperties--
childrenReactNode--
defaultValuestring-Yes

ListProps

PropTypeDefaultRequired
classNamestring--
styleCSSProperties--
childrenReactNode--
variant'solid' | 'outlined'--
blockboolean--
justify'center' | 'end' | 'space-between' | 'start''center'-
MarginPropsToken<MarginProps>--
colorThemeAccentColor--
radiusThemeRadius--
sizeResponsive<Size>'medium'-
highContrastboolean--

TriggerProps

PropTypeDefaultRequired
classNamestring--
styleCSSProperties--
childrenReactNode--
valuestring-Yes
onClick() => void--

ContentProps

PropTypeDefaultRequired
classNamestring--
styleCSSProperties--
childrenReactNode--
valuestring-Yes
Progress Linear
Previous
Table
Next