Tabs

A compound component for switching between related panels of content, with a sliding active-tab indicator.

Installation

npx dafink-ui add tabs

Demo

Manage your account settings and preferences.

Composition

<Tabs>

</TabsList>

</Tabs>

Props

Name	Type	Default	Description
value	string	-	The currently active tab value (controlled).
onValueChange	(v: string) => void	-	Called when the user activates a different tab.
className	string	""	Additional classes on the root wrapper div.

Accessibility

Tabs uses roving tabindex: only the active trigger sits in the page's Tab order, so Tab moves into and out of the whole tab list in a single stop, the same mechanic as ToggleGroup and MenuBarNav. Arrow keys move focus between triggers without changing the active tab; Enter/Space activates whichever trigger is currently focused. TabsList carries role="tablist", each trigger carries role="tab" with aria-selected and aria-controls pointing at its panel, and each TabsContent carries role="tabpanel" with aria-labelledby pointing back to its trigger; the inactive panel is unmounted entirely rather than merely hidden.

Key	Function
`tab`	Moves focus to the tab list's active trigger, or out to the next tabbable element if focus is already inside the list.
`shift`+`tab`	Moves focus out of the tab list to the previous tabbable element.
`right arrow`	Moves focus to the next enabled trigger, wrapping from the last to the first.
`left arrow`	Moves focus to the previous enabled trigger, wrapping from the first to the last.
`home`	Moves focus to the first enabled trigger.
`end`	Moves focus to the last enabled trigger.
`enter`	Activates the focused trigger.
`space`	Activates the focused trigger.