Tabs

Tabs organize content into separate views where only one view can be visible at a time.

TODO

  • Add ripple animation on tab click
  • Fix focus states (review focus-visible ring behavior)

Import

Usage

Your music library is empty.

Colors

default
primary
secondary
success
warning
danger
lavender

Variants

Default

Your photo library is empty.

Underlined

Your photo library is empty.

With Icons

Your photo library is empty.

Disabled

Your music library is empty.

Data Attributes

  • -
    data-slot="tabs"Tabs root container identifier
  • -
    data-slot="tabs-list"Tabs list container identifier
  • -
    data-slot="tabs-trigger"Individual tab trigger identifier
  • -
    data-slot="tabs-content"Tab content area identifier
  • -
    data-state="active" | "inactive"Indicates whether a tab is currently active

Accessibility

Keyboard Support

  • -
    TabMoves focus to the next focusable element
  • -
    ArrowLeftMoves focus to the previous tab
  • -
    ArrowRightMoves focus to the next tab
  • -
    HomeMoves focus to the first tab
  • -
    EndMoves focus to the last tab

ARIA Attributes

  • -
    role="tablist"Applied to the TabsList container
  • -
    role="tab"Applied to each TabsTrigger
  • -
    role="tabpanel"Applied to each TabsContent
  • -
    aria-selectedIndicates the selected state of each tab
  • -
    aria-controlsLinks tab triggers to their content panels

Tabs Props

AttributeTypeDefaultDescription
defaultValuestring-The value of the tab that should be active by default.
valuestring-The controlled value of the active tab.
onValueChange(value: string) => void-Callback when the active tab changes.
variant'default' | 'underlined''default'Visual style variant of the tabs.
color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender''default'Color scheme of the tabs.

TabsList Props

AttributeTypeDefaultDescription
variant'default' | 'underlined'Inherited from TabsVisual style variant of the tabs list container.

TabsTrigger Props

AttributeTypeDefaultDescription
valuestring-The unique value for this tab (required).
variant'default' | 'underlined'Inherited from TabsVisual style variant of the tab trigger.
color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender'Inherited from TabsColor scheme of the tab trigger.
disabledbooleanfalseWhether this tab is disabled.

TabsContent Props

AttributeTypeDefaultDescription
valuestring-The unique value for this tab content (required). Should match a TabsTrigger value.