Tabs
Three shapes of tab list, each with a moving indicator rendered for you.
Loading documentation…
Powered by heyo
142,318 requests this month.
Tabs switch what is displayed, in place. The moving highlight is pure CSS —
Base UI publishes the active tab's geometry as custom properties, so there is
no measuring in React and no resize observer.
Tabs.List renders its own indicator. You never place Tabs.Indicator
yourself unless you want it somewhere unusual.
A rule runs the full width and the indicator sits on it. The default for page-level navigation.
Padded tabs that highlight on hover, with the indicator detached below a hairline.
A pill that slides between tabs inside a recessed track. The selected pill is the indicator, so there is nothing else to place.
Write the tabs out when a row needs more than a label — a count, a status dot, a router link.
Tabs change what is shown. A ToggleGroup changes
how the same thing is shown — grid or list, day or week.
The shape of the list. It defaults to line.
Controlled and uncontrolled selection.
Fires when a tab is selected.
The axis. It defaults to horizontal.
Shorthand: { value, label, icon?, disabled? } per tab.
The moving highlight, rendered for you. Pass false only to place
Tabs.Indicator somewhere unusual yourself.
Ties a tab to its panel.
Dims a tab and ignores interaction.
Tabs.Panel holds the content for its value. Tabs.Indicator takes no
children — it is the moving highlight.