Components
Tabs
Tabs allow users to navigate between related sections of content, with only one section visible at a time. This is an effective way to organize and present related content on the same page.
React
const Preview = () => { return ( <Tabs defaultValue='value1'> <Tabs.List> <Tabs.Tab value='value1'>Tab 1</Tabs.Tab> <Tabs.Tab value='value2'>Tab 2</Tabs.Tab> <Tabs.Tab value='value3'>Tab 3</Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); }; render(<Preview />)
- value
- Description
Controlled state for `Tabs` component
- Type
string- Default
undefined
- defaultValue
- Description
Default selected tab value
- Type
string- Default
undefined
- onChange
- Description
Callback with selected `TabItem` `value`
- Type
(value: string) => void- Default
undefined
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | undefined | Controlled state for `Tabs` component |
| defaultValue | string | undefined | Default selected tab value |
| onChange | (value: string) => void | undefined | Callback with selected `TabItem` `value` |
TabsPanel
- value
- Description
When this value is selected as the current state, render this `TabsPanel` component. Must match the `value` of a `Tabs.Tab` component.
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | When this value is selected as the current state, render this `TabsPanel` component. Must match the `value` of a `Tabs.Tab` component. |
TabsTab
- value
- Description
Unique value that will be set in the `Tabs` components state when the tab is activated
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique value that will be set in the `Tabs` components state when the tab is activated |
Use
Example
Icons only
In the example below, we have added Tooltip around Tabs.Tab to provide descriptive text for the icons.
React
const IconsOnlyEn = () => { return ( <Tabs defaultValue='car'> <Tabs.List> <Tooltip content='Your cars'> <Tabs.Tab value='car'> <CarIcon title='Car' /> </Tabs.Tab> </Tooltip> <Tooltip content='Your bicycles'> <Tabs.Tab value='bicycle'> <BicycleIcon title='Bicycle' /> </Tabs.Tab> </Tooltip> <Tooltip content='Your motorcycles'> <Tabs.Tab value='motorcycle'> <MotorcycleIcon title='Motorcycle' /> </Tabs.Tab> </Tooltip> </Tabs.List> <Tabs.Panel value='car'> You have no items of this type registered with us </Tabs.Panel> <Tabs.Panel value='bicycle'> You have no items of this type registered with us </Tabs.Panel> <Tabs.Panel value='motorcycle'> You have no items of this type registered with us </Tabs.Panel> </Tabs> ); }; render(<IconsOnlyEn />)
Controlled
React
const Controlled = () => { const [value, setValue] = useState('value1'); return ( <Tabs value={value} onChange={(newValue) => setValue(newValue)}> <Tabs.List> <Tabs.Tab value='value1'>Tab 1</Tabs.Tab> <Tabs.Tab value='value2'>Tab 2</Tabs.Tab> <Tabs.Tab value='value3'>Tab 3</Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); }; render(<Controlled />)
HTML
You can use u-tabs (u-elements.github.io), which is a web component that implements tabs.
Add the class name ds-tabs.
We recommend using <u-tabs>, and not building your own tabs from scratch, to ensure good accessibility and functionality.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-tabs-tab-padding | var(--ds-size-3) var(--ds-size-5) |
| --dsc-tabs-tab-color | var(--ds-color-neutral-text-subtle) |
| --dsc-tabs-tab-color--hover | var(--ds-color-neutral-text-default) |
| --dsc-tabs-tab-color--selected | var(--ds-color-text-subtle) |
| --dsc-tabs-content-padding | var(--ds-size-4) var(--ds-size-5) |
| --dsc-tabs-list-border-color | var(--ds-color-neutral-border-subtle) |
| --dsc-tabs-list-border-bottom-width | var(--ds-border-width-default) |
| --dsc-tabs-list-border-bottom-style | solid |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)