Tabs organize content into multiple sections and allow users to navigate between them.
OUI exports 4 tabs-related components:
Two variants of tabs are available: underlined and bordered.
Tabs provide a list of tabs that a user can select from to switch between multiple tab panels. Tabs can be used to implement these in an accessible way.
A default selected tab can be provided using the defaultSelectedKey prop, which should correspond to the id prop provided to each item. When Tabs is used with dynamic items as described below, the key of each item is derived from the data. See the Selection guide for more details.
Selection can be controlled using the selectedKey prop, paired with the onSelectionChange event. The id prop from the selected tab will be passed into the callback when the tab is selected, allowing you to update state accordingly.
Selected time period: triassic
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.
When the tab panel doesn't contain any focusable content, the entire panel is given a tabIndex=0 so that the content can be navigated to with the keyboard. When the tab panel contains focusable content, such as a textfield, then the tabIndex is omitted because the content itself can receive focus.
This example uses the same Tabs component from above. Try navigating from the tabs to the content for each panel using the keyboard.
The above examples have shown tabs with static items. The items prop can be used when creating tabs from a dynamic collection, for example when the user can add and remove tabs, or the tabs come from an external data source. The function passed as the children of the TabList component is called for each item in the list, and returns an <Tab>. A function passed as the children of the Collection component returns a corresponding <TabPanel> for each tab.
Each item accepts an id 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 an id prop is not required. See Collection Components for more details.
By default, tabs are horizontally oriented. The orientation prop can be set to vertical to change this. This does not affect keyboard navigation.
All tabs can be disabled using the isDisabled prop.
An individual Tab can be disabled with the isDisabled prop. Disabled tabs are not focusable, selectable, or keyboard navigable.
In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs. Each key in this list corresponds with the id prop passed to the Tab component, or automatically derived from the values passed to the items prop (see Collection Components for more details). A tab is considered disabled if its id exists in disabledKeys or if its isDisabled prop is true.