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 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 tabs at the top, at the bottom, or both.
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
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
|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 |
Box so you call pass all
Box related props.
|The callback to update the active tab index.|
|The controlled index of the tabs.|
|The index of the initial active tab.|
|The children of the switch.|