Component size, gzipped: 14kb

Tabs

Loading
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

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

activeKey
string
Key of the the tab to be selected.
children
react node
An array of Tab components.
disabled
boolean
True when all tabs are disabled.
onChange
function
Change handler that is called every time a new tab is selected.
orientation
enum
The orientation of the tab component.
overrides
custom
Lets you customize all aspects of the component.
renderAll
boolean
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: