Components

Tabs

Organize content into tabbed panels. Supports controlled and uncontrolled modes, with two visual variants.

Basic usage

Use defaultValue for uncontrolled behavior.

Manage your account settings and preferences.

Pills variant

Use variant="pills" on both TabsList and TabsTrigger for a segmented control style.

Weekly statistics and metrics.

Tabs Props

PropTypeDefaultDescription
valuestring—Controlled active tab value.
defaultValuestring—Initial active tab for uncontrolled usage.
onValueChange(value: string) => void—Callback when active tab changes.

TabsList Props

PropTypeDefaultDescription
variant'default' | 'pills''default'Visual style of the tab list.

TabsTrigger Props

PropTypeDefaultDescription
valuerequiredstring—Unique identifier for this tab.
variant'default' | 'pills''default'Must match TabsList variant.

Accessibility

  • Uses role="tablist", role="tab", and role="tabpanel".
  • Active tab has aria-selected="true" and tabindex="0".
  • Inactive tabs have tabindex="-1".
  • Tabpanel is focusable for keyboard users.