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.
Tabs
Navigate between different types of related content at the same level of hierarchy.
styleKeys: tabsscriptKeys: tabs
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.
Usage
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:
- the "headers" (the clickable "tabs" themselves)
- the "contents" (the content for each tab)
React Usage
Tabsconsists ofTabsHeadersandTabsContents.- Inside of the
TabsHeaders, we have individualTabHeadercomponents, and inside of theTabsContentswe have individualTabContentcomponents. - Each
TabHeadermatches up with a singleTabContentvia thetabIdprop. EveryTabHeaderandTabContentmust have atabIdin order forTabsto be able to tell whichTabContentto show when a certainTabHeaderis clicked. - A
defaultSelectedTabIdcan 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.
Vanilla Usage
In vanilla, Tabs headers are a series of radio buttons and labels.
- The
tabs-headerselement that wraps the headers must haverole="tablist" - Each radio button needs a
valueproperty whose value is the selector of the contents element associated with that radio button. For instance, if the contents panel has an id ofexampleTab1, then the input should havevalue="#exampleTab1" - Each radio button also must have
role="tab", and anaria-controlsproperty whose value is theidof the tab panel that it goes with. - The radio button associated with the default tab should have the property
checked="checked". - You can disable a tab by putting the
disabledproperty onto the radio button associated with that tab. The Tabs contents are a series of divs that are associated with those radio buttons. - Each content panel must have
role="tabpanel"and anaria-labelledbyattributes whose value is theidof the<label>in the tabs headers that the tab panel goes with.
Centered Headers
Use this option if you want the headers to be centered instead of left-aligned.
Dividing Line
You can hide the dividing line between the tabs headers and the content of the tabs.
Sticky Headers
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.
With Icons
To add Icons to the headers you can add them directly to the TabHeader.
Wrap Headers
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.
Managing State in React
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.
Best practices
Don't
- Nest one set of tabs inside another.
- Use more than one row of tabs.
SEO considerations
- Content within any tab that's not the default tab is readable by Googlebot, but not SEO-friendly. Googlebot considers content you put behind these tabs as less important for users and for organic visibility (ranking). All major content must appear on the default tab; other tabs must contain less important information since they will be deprecated by Googlebot in terms of ranking.
- Whenever possible, instead of displaying the content behind a tab, use anchor links that point to a different location on the same page.
Props
Tabs
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| 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 |
TabHeader
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| 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 |
TabsHeaders
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
TabHeaderLabel
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | The id of the matching tab | null |
TabHeaderInput
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | The id of the matching tab | null |
TabContent
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| tabId | string | true | - | null |
Was this page useful?
Published: Jan 7, 2022Last updated: Oct 29, 2024
