Tabs

Organize related views with directional keyboard support and clear panel ownership.

Example

General Settings

Configure general application settings here.

Code

View on GitHub

API reference

TabsProps

itemsTabItem[]—

Name: items

Description: Array of tab definitions (id, label, content, disabled).

Type: TabItem[]

Default: —

defaultSelectedIdstring—

Name: defaultSelectedId

Description: Initial selected tab in uncontrolled mode.

Type: string

Default: —

selectedIdstring—

Name: selectedId

Description: Selected tab ID in controlled mode.

Type: string

Default: —

onSelectionChange(id: string) => void—

Name: onSelectionChange

Description: Selection callback for controlled usage.

Type: (id: string) => void

Default: —

orientation'horizontal' | 'vertical''horizontal'

Name: orientation

Description: Layout orientation for tab list keyboard behavior.

Type: 'horizontal' | 'vertical'

Default: 'horizontal'

activationMode'automatic' | 'manual''automatic'

Name: activationMode

Description: Determines whether arrow keys auto-activate tabs.

Type: 'automatic' | 'manual'

Default: 'automatic'

aria-label / aria-labelledbystring—

Name: aria-label / aria-labelledby

Description: One of these is required to provide tablist accessible name.

Type: string

Default: —

Accessibility

  • WCAG 2.1.1 Keyboard: Arrow key navigation, Home/End support
  • WCAG 4.1.2 Name, Role, Value: ARIA tabs pattern
  • WCAG 2.4.3 Focus Order: Proper focus management

Playground

Open Tabs stories