Sponsor

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.

Import#

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.

one!

Editable Example

Tab variants and color#

Tabs come in 6 different variants to style the tabs: line,enclosed, enclosed-colored, soft-rounded, solid-rounded, unstyled

one!

Editable Example

You can also change the color for any specific variant by passing the variantColor.

The value of variantColor must exist in the theme object, and must be a key in theme.colors that has the 100 - 900 color values.

one!

Editable Example

Tab sizes#

You can change the size of the tab by passing size prop. We support 3 sizes sm, md, lg

one!

Editable Example

Change the tabs alignment#

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

one!

Editable Example

Fitted Tabs#

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

one!

Editable Example

Styling the tab states manually#

In event you need to create custom styles for the tabs. Simply set the variant to unstyled, and use the _selected, _hover, _active style props.

one!

Editable Example

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.

The Primary Colors
Editable Example

Make a tab initially active#

If you want a tab to be initially active, simply pass the defaultIndex prop and set it to the index of that tab.

Editable Example

Make a Tab disabled#

When a Tab is disabled, it's skipped during keyboard navigation and it's not clickable.

1
Editable Example

Manually Activated Tabs#

By default, 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 specific tab, users can activate a tab by pressing Space or Enter.

one!

Editable Example

Controlled Tabs#

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

Editable Example

Creating custom tab components#

Because TabList needs to know the order of the children, we use cloneElement 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.

1
Editable Example

Data Tabs#

If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.

Perhaps the greatest dish ever invented.
Editable Example

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.
isManualbooleanIf true, keyboard navigation changes focus between tabs but doesn't activate it. User will have to press Enter to active it
childrenReact.ReactNodeThe children of the switch.
variantline,enclosed,enclosed-colored, soft-rounded, solid-rounded, unstyledlineThe visual style of the tab.
variantColorstringThe primary color to use for the selected variant. Use a color key in theme.colors
sizesm, md, lgmdThe visual size of the tabs
orientationhorizontal, verticalhorizontalThe orientation of the tabs
isFittedbooleanIf true, the tabs will stretch to fill the available space

Tab Props#

NameTypeDefaultDescription
isDisabledbooleanIf true, the tab will be disabled

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo