An accessible tabs component.
TabPanel elements are associated by their order in the tree.
None of the components are empty wrappers, each is associated with a real DOM
element in the document, giving you maximum control over styling and
You can render any other elements you want inside of Tabs, but TabList should only render Tab elements, and TabPanels should only render TabPanel elements.
TabPanels as children. The order doesn't matter,
you can have tabs on the top or the bottom. In fact, you could have tabs on both
the bottom and the top at the same time. You can have random elements inside as
Tab variants and color#
Tabs come in 6 different variants to style the tabs:
Manually Activated Tabs#
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
TabPanel should ideally be preloaded. However, if switching
to a tab panel causes a network request and possibly a page refresh, there might
be some notable 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 specifc tab, users can activate a tab by pressing Space or Enter.
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
Calls back with the tab index whenever the user changes tabs, allowing your app to synchronize with it.
Starts the tabs at a specific index.
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. If you want to know if a tab is active, you can wrap
it, and then inspect clone props passed in.
Tab is disabled, it's skipped from the keyboard navigations and not
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 |
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2019 Segun Adebayo