Tabs

Open in Playground

items: [{ key, label, content?, disabled? }]. Controlled with value / onChange, or uncontrolled with defaultValue. Arrow, Home and End keys move between tabs. When there are more tabs than fit, scroll buttons appear at both ends (disabled at the ends) and the active tab is kept in view; scrollButtons="never" turns them off.

Welcome to the lair.

Props

Tabs

itemsTabItem[]
Tabs; content is shown in the panel when active. See the TabItem table below.
valuestring
Active key (controlled).
defaultValuestring
Default: first key
Initially active key (uncontrolled).
onChange(key: string) => void
Called when the active tab changes.
scrollButtons'auto' | 'never'
Default: 'auto'
Show scroll buttons at both ends when the tabs do not fit; never hides them.
classNamestring
Default: ''
Extra classes for the root element.

Tabs props
Prop	Type	Default	Description
`items`	TabItem[]	–	Tabs; `content` is shown in the panel when active. See the TabItem table below.
`value`	string	–	Active key (controlled).
`defaultValue`	string	`first key`	Initially active key (uncontrolled).
`onChange`	(key: string) => void	–	Called when the active tab changes.
`scrollButtons`	'auto' \| 'never'	`'auto'`	Show scroll buttons at both ends when the tabs do not fit; never hides them.
`className`	string	`''`	Extra classes for the root element.

TabItem

keystring
Unique key of the tab.
labelReactNode
Text of the tab button.
contentReactNode
Shown in the panel while the tab is active.
disabledboolean
Default: false
Dim the tab and ignore it.

TabItem props
Prop	Type	Default	Description
`key`	string	–	Unique key of the tab.
`label`	ReactNode	–	Text of the tab button.
`content`	ReactNode	–	Shown in the panel while the tab is active.
`disabled`	boolean	`false`	Dim the tab and ignore it.