Tabs

A row of tabs and one visible panel. Keyboard and screen readers work out of the box.

Example

Billed every month. Cancel at any time.

Example.jsx

import { Tabs } from './components/Tabs'

<Tabs
  label='Plans'
  items={[
    { label: 'Monthly', content: <p>Billed every month.</p> },
    { label: 'Yearly', content: <p>Two months free.</p> },
  ]}
/>

Keyboard

Tab moves into the list and on to the panel. Left and right arrows move between tabs, Home and End jump to the first and the last. Only the active tab is in the tab order.

Parts

Class	What it is
`tabs`	the wrapper
`tabs-list`	the row of buttons, role tablist
`tabs-panel`	one panel, role tabpanel, hidden unless active

The active button is styled by aria-selected, not by a class.

Variables

Variable	Default	What it sets
`$tabs-gap`	`4px`	space between tabs
`$tabs-padding`	`4px`	padding of the list
`$tabs-height`	`32px`	height of a tab
`$tabs-radius`	`$radius`	radius of the list
`$tabs-background`	`var(--surface)`	background of the list
`$tabs-active`	`var(--page)`	background of the active tab
`$tabs-shadow`	`0 1px 2px rgba($dark, .08)`	shadow of the active tab