Tabs
import { Tabs } from '@tangible/ui';
Interactive docs and examples: Tabs in Storybook.
Tabs props
| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode |
||
activationMode? |
"auto" | "manual" |
'auto' |
Auto: select on focus. Manual: arrow keys move focus only, Enter/Space selects. |
className? |
string |
Additional classes | |
defaultValue? |
string |
Uncontrolled initial tab | |
onValueChange? |
(value: string) => void |
Callback when active tab changes | |
orientation? |
"horizontal" | "vertical" |
'horizontal' |
Affects arrow key mapping and aria-orientation |
value? |
string |
Controlled active tab | |
variant? |
"outline" | "pill" | "underline" |
'underline' |
Visual style |
Tabs.List
| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode |
||
aria-label? |
string |
||
aria-labelledby? |
string |
||
className? |
string |
Additional classes |
Tabs.Tab
| Prop | Type | Default | Description |
|---|---|---|---|
value |
string |
Unique identifier, must match a Panel | |
aria-label? |
string |
Accessible label for the tab button. Required for icon-only tabs (no children). Omitting this on an icon-only tab leaves the button without an accessible name, making it invisible to screen readers. |
|
aria-labelledby? |
string |
Accessible name by reference. Modelled explicitly, like aria-label above and like the group root already does — otherwise it rides ...rest and its ordering relative to the group's own attributes is incidental. Forwarding is deliberate: it is a legitimate way to name an item from visible text elsewhere. It does OUTRANK the item's own label (AccName 2A), and an id that resolves to nothing empties the name entirely (step 2B) — so point it at an element that exists. |
|
children? |
ReactNode |
||
className? |
string |
Additional classes | |
disabled? |
boolean |
false |
Disable tab (skipped in keyboard nav) |
icon? |
IconName |
Icon name from registry |
Also accepts the standard attributes of ButtonHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.
Tabs.Panel
| Prop | Type | Default | Description |
|---|---|---|---|
value |
string |
Must match a Tab value | |
children? |
ReactNode |
||
className? |
string |
Additional classes |
Examples
-
Disabled Tabs: Disabled tabs are skipped by arrow-key navigation. Manual testing note: NVDA + Firefox may announce disabled tabs differently from Chrome — verify with both browsers when auditing.
Other stories: Playground, Variants, With Icons, Manual Activation, Vertical, Controlled, Keyboard Navigation, Icon-Only Tabs, Course Content, Navigation Tabs (interactive page).
Component API tokens
Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.
--tui-tabs-gap--tui-tabs-list-bg--tui-tabs-list-fg--tui-tabs-list-padding--tui-tabs-list-radius--tui-tabs-tab-padding--tui-tabs-tab-radius--tui-tabs-tab-bg--tui-tabs-tab-fg--tui-tabs-tab-bg-active--tui-tabs-tab-fg-active--tui-tabs-tab-bg-hover--tui-tabs-tab-border--tui-tabs-indicator--tui-tabs-indicator-size