⚠️ Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
Use tabs to organize and navigate between different types of related content at the same level of hierarchy, in the same viewing area on a page.
Tab headers will not line-wrap if there is not enough space to display them all. Instead, the user will be able scroll them horizontally. A slight gradient will appear at the right edge to indicate there is hidden content.
Tabs consist of two main parts:
Tabs consists of TabsHeaders and TabsContents.TabsHeaders, we have individual TabHeader components, and inside of the TabsContents we have individual TabContent components.TabHeader matches up with a single TabContent via the tabId prop. Every TabHeader and TabContent must have a tabId in order for Tabs to be able to tell which TabContent to show when a certain TabHeader is clicked.defaultSelectedTabId can be provided in order to specify the initially-selected tab. If you want to control the state beyond just the initial selection, check out the managing state section.In vanilla, Tabs headers are a series of radio buttons and labels.
tabs-headers element that wraps the headers must have role="tablist"value property whose value is the selector of the contents element associated with that radio button. For instance, if the contents panel has an id of exampleTab1, then the input should have value="#exampleTab1"role="tab", and an aria-controls property whose value is the id of the tab panel that it goes with.checked="checked".disabled property onto the radio button associated with that tab. The Tabs contents are a series of divs that are associated with those radio buttons.role="tabpanel" and an aria-labelledby attributes whose value is the id of the <label> in the tabs headers that the tab panel goes with.Use this option if you want the headers to be centered instead of left-aligned.
You can hide the dividing line between the tabs headers and the content of the tabs.
This option makes the headers sticky to the top of the screen if the tabs content is tall. This option will also automatically hide the dividing line between the tab headers and the tab content.
⚠️ wrapHeaders is deprecated in SWAN v3.3
No direct replacement for better semantic roles on SWAN components. Use the default behaviour.
This option makes the headers wrap to the next line if there isn't enough room.
Most often with Tabs it is not necessary for you to take ownership of the state (the currently-selected tab). The defaultSelectedTabId prop is available if you'd like to specify which tab should be selected initially without committing to fully managing the Tabs's state.
If you do want to control the state of the Tabs yourself (e.g. other parts of your app care about which tab is currently selected), you can provide the selectedTabId and onRequestTabChange props.
onRequestTabChange is invoked with the requested tabId and it is also passed a second arg which is the event that triggered the change in case you need it.
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| centerHeaders | boolean | null | false | Whether or not the headers are centered horizontally in their container | null |
| stickyHeaders | boolean | null | false | Whether or not the headers are sticky.
Also hides the dividing line between the tab headers and content | null |
| wrapHeaders | boolean | null | false | ⚠️ Deprecated - This is deprecated without a replacement. Tabs will be scrollable.
Whether or not the headers will wrap | null |
| showDividingLine | boolean | null | false | Whether or not there is a dividing line between headers and contents | true |
| defaultSelectedTabId | string | null | false | The id of the tab which should be selected initially, used for uncontrolled tabs | null |
| selectedTabId | string | null | false | The id of the tab which should be selected. Used when controlling the state of the tabs | null |
| onRequestTabChange | ((tabId: string | null, event: ChangeEvent<HTMLInputElement>) => void) | null | false | Callback which is fired when the user requests a tab-change | null |
<input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | The id of the matching tab | null |
| disabled | boolean | null | false | Whether or not the header is disabled | null |
| inputProps | Omit<TabHeaderInputProps, "ref" | "tabId"> | null | false | Props passed to the TabHeaderInput | null |
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<label /> as the root element. You can utilize the native attributes supported by <label /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | The id of the matching tab | null |
<input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | The id of the matching tab | null |
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | - | null |
