Tabs

UI

Tab navigation built on Radix UI with underline-style tab bar and keyboard navigation.

[EXAMPLES]

Basic Tabs

Overview content

[PROPS]

PROPTYPEDEFAULTDESCRIPTION
defaultValuestringInitial active tab value
valuestringControlled active tab
onValueChange(value: string) => voidTab change callback

[ACCESSIBILITY]

KEYBOARD SHORTCUTS

KEYACTION
Arrow Left/RightSwitch between tabs
Home / EndFirst/last tab

ARIA

  • >role="tablist" on TabsList
  • >role="tab" on each trigger
  • >role="tabpanel" on content
  • >aria-selected on active tab