Component size, gzipped: 16kb

Tabs

API

The Tabs component is used for navigating frequently accesssed, but distinct categories.

Accessibility

  • tab, shift + tab - to move focus between tabs.
  • Space or Enter - to display the selected tab's content
  • aria-selected, aria-disabled are applied to the tabs.
  • Roles: role=tab, role=tablist, role=tabpanel

Examples

Controlled Tabs Usage

Tab Content 1

Uncontrolled Tabs Usage

Tab 1 content

With Custom Keys

⚫️ ️

We use tab order to provide default keys for each tab. You can however, pass in your own key to a tab and set activeKey accordingly.

Tabs SEO Friendly

Tab 1 content
Tab 2 content
Tab 3 content

Tabs Vertical Usage

Tab 3 content

Tabs Overrides

Tab Content 1

API

Tabs props

NameTypeDescription
activeKey
Key of the the tab to be selected.
children
An array of Tab components.
disabled
True when all tabs are disabled.
onChange
Change handler that is called every time a new tab is selected.
orientation
The orientation of the tab component.
overrides
Lets you customize all aspects of the component.
renderAll
Renders all tab content for SEO purposes regardless of tab active state.

Tabs exports

You can import this module like so:

import {Tabs} from 'baseui/tabs'

It exports the following components or utility functions: