Tabs

Navigation · src/components/Tabs/Tabs.tsx

Switches between views of the same thing.

Same thing, different view - not steps in a process (Stepper) and not separate destinations (navigation). Six tabs is about the limit before a list reads better.

Roving tabindex, which is the pattern people get wrong: Tab reaches the selected tab and then leaves the list, and the arrow keys move between tabs. Making every tab tabbable sounds more accessible and is worse - a keyboard user then has to press Tab past all of them to reach the panel.

Import

import { Tabs } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
items	TabItem[]
value	string	The selected tab's id. Uncontrolled, it falls back to the first item.
variant	'line' | 'pill' | 'enclosed'
label	string	Names the tab list for assistive technology.
className	string
children	React.ReactNode
onChange	(id: string) => void

Exported types

TabItem