React SDK

Tabs

An accessible tabs component.

The Tab and 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 composition.

Usage

You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children.

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have tabs at the top, at the bottom, or both.

Editable Example

one!

Change the tabs alignment

You can change the alignment of the TabList by passing align prop. We support 3 sizes start, center, end.

Editable Example

one!

Fitted Tabs

Stretch the tab list to fit the container by passing fitted prop.

Editable Example

one!

Tabs onChange

The 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 index prop.

Editable Example
The Primary Colors

Accessibility

Keyboard

KeyAction
ArrowLeftMoves focus to the next tab
ArrowUpMoves focus to the previous tab
TabWhen focus moves into the tab list, places focus on the active tab element
Space or EnterActivates the tab if it was not activated automatically on focus
HomeMoves focus to the first tab
EndMoves focus to the last tab

ARIA roles

ComponentAriaUsage
Tabrole="tab"Indicates that it's a tab.
aria-selectedSet to true a tab is selected and all other Tabs have it set to false.
aria-controlsSet to the id of its associated TabPanel.
TabListidThe id of the TabPanel that's referencd by its associated Tab.
aria-orientationSet to vertical or horizontal based on the value of the orientation prop.
role="tablist"Indicates that it's a tablist.
aria-labelledbySet to the id of the Tab that labels the TabPanel.

Props

Tabs Props

Tabs composes Box so you call pass all Box related props.

NameTypeDefaultDescription
onChange(index: number) => voidThe callback to update the active tab index.
indexnumberThe controlled index of the tabs.
defaultIndexnumberThe index of the initial active tab.
manualbooleanIf true, keyboard navigation changes focus between tabs but doens't activate it. User will have to press Enter to active it.
childrenReact.ReactNodeThe children of the switch.
fittedbooleanIf true, the tabs will stretch to fill the available space.

Tab Props

NameTypeDefaultDescription
disabledbooleanIf true, the tab will be disabled.