Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

  • Crossed the Rubicon in 49 BCE, sparking civil war
  • Implemented the Julian calendar
  • Assassinated on the Ides of March (March 15) in 44 BCE

Examples

Vertical orientation

  • Crossed the Rubicon in 49 BCE, sparking civil war
  • Implemented the Julian calendar
  • Assassinated on the Ides of March (March 15) in 44 BCE

Props

id
string—
orientation
Orientation'horizontal'
isDisabled
boolean—
disabledKeys
Iterable<Key>—
onSelectionChange
((key: Key) => void)—
selectedKey
Key | null—
defaultSelectedKey
Key—
keyboardActivation
"manual" | "automatic"'automatic'
children
ReactNode | ((values: TabsRenderProps & { defaultChildren: ReactNode; }) => ReactNode)—
className
string | ((values: TabsRenderProps & { defaultClassName: string; }) => string)—
style
CSSProperties | ((values: TabsRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)—
slot
string | null—