An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
You can render any element within
TabList should only have
as children, and
TabPanels should have
TabPanel as children.
TabPanels as children. The order doesn't matter,
you can have
TabList at the top, at the bottom, or both.
Tabs come in 6 different variants to style the tabs:
You can also change the color scheme for any specific variant by passing the
The value of
colorSchememust exist in the theme object, and must be a key in
theme.colorsthat has the
You can change the size of the tab by passing
size prop. We support 3 sizes
You can change the alignment of the
TabList by passing
align prop. We
support 3 sizes
Stretch the tab list to fit the container by passing
In event you need to create custom styles for the tabs. Simply set the variant
unstyled, and use the
_active style props.
onChange callback returns the active tab's index whenever the user changes
tabs. If you intend to control the tabs programmatically, use this with the
If you want a tab to be initially active, simply pass the
and set it to the index of that tab.
Tab is disabled, it's skipped during keyboard navigation and it's not
Tabs are activated automatically. This means when you use the
arrow keys to change tabs, the tab is activated and focused.
The content of a
TabPanelshould ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some noticable latency and this might affect the experience for keyboard and screen reader users.
In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specific tab, users can activate a tab by pressing Space or Enter.
By default, the
Tabs component renders all tabs content to the DOM, meaning that invisible tabs are still rendered but are hidden by styles.
If you want to defer rendering of each tab until that tab is selected, you can use the
isLazy prop. This is useful if your tabs require heavy performance, or make network calls on mount that should only happen when the component is displayed.
Like form inputs, a tab's state can be controlled. Make sure to include an onChange as well, or else the tabs will not be interactive.
Click the tabs or pull the slider around
Yeah yeah. What's up?
Oh, hello there.
TabList needs to know the order of the children, we use
to pass state internally. Your custom
Tab component must use
If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.
|Moves focus to the next tab|
|Moves focus to the previous tab|
|When focus moves into the tab list, places focus on the active tab element|
|Activates the tab if it was not activated automatically on focus|
|Moves focus to the first tab|
|Moves focus to the last tab|
|Tab||Indicates that it's a tab|
|Set to |
|Set to the |
|Set to vertical or horizontal based on the value of the |
|Indicates that it's a tablist|
|Set to the |