Tabs

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

Examples

Vertical orientation

Props

isDisabled
boolean—
id
string—
disabledKeys
Iterable<Key>—
orientation
Orientation'horizontal'
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—