Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
Tabs expects <TabList> and <TabPanels> elements as children, however additional elements may wrap them to allow for layout flexibility. TabList and TabPanels follow the Collection Components API, accepting both static and dynamic collections. TabList and TabPanel accept <Item> elements as children,
each with a key prop. The key passed to the TabList <Item> must match its corresponding TabPanel <Item>.
Static collections, as in the previous example, can be used when the full list of tabs and their contents is known ahead of time.
Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. As seen below, an iterable list of options is passed to the Tabs using the items prop.
Each item accepts a key prop, which is passed to the onSelectionChange handler to identify the selected item. Alternatively, if the item objects contain an id property, as shown in the example below, then this is used automatically and a key prop is not required.
See the Events section for more detail on selection.
To internationalize Tabs, a localized string should be passed as children to the TabList <Item>. Any text content within the Tab's panel should also be localized accordingly.
For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of Tabs is automatically flipped.
If you need to add additional structure to Tabs such as buttons in-line with the TabList, we support this too.
TabList and TabPanels are not required to be the immediate children of Tabs.
While an aria-label is not explicitly required for a tab list, Tabs should be labeled using a aria-label in the absence of an ancestor landmark.
This will prevent screen readers from announcing non-focused tabs, allowing for a more focused experience.
Setting a selected tab can be done by using the defaultSelectedKey or selectedKey prop. The selected key corresponds to the key of an item. See Events for more details on selection events.
Additionally, see the react-statelySelection docs for caveats regarding selection prop typing.
Tabs supports selection via mouse, keyboard, and touch. You can handle all of these via the onSelectionChange prop. Tabs will pass the selected key to the onSelectionChange handler.
The following example uses an onSelectionChange handler to update the tab selection stored in React state.
By default, pressing the arrow keys while focus is on a Tab will switch selection to the adjacent Tab in that direction, updating the content displayed accordingly. If you would like to prevent selection change
from happening automatically you can set the keyboardActivation prop to "manual". This will prevent tab selection from changing on arrow key press, requiring a subsequent Enter or Space key press to confirm
tab selection.
If there isn't enough horizontal room to render every tab on a single line, the component will collapse all tabs into a Picker. Note that this does not apply to vertical Tabs.