API reference
<tng-tabs> is a wrapper root. The behavior contract for selection, focus, and panel activation still comes from the tabs primitives.
Wrapper component
| Input / Output | Type | Default | Notes |
|---|---|---|---|
ariaLabel | string | 'Tabs' | Applied to the wrapper host when you do not supply your own label. |
value | string | number | null | undefined | Controlled selected value forwarded to the primitive root. |
defaultValue | string | number | null | undefined | Uncontrolled initial selection. |
activation | 'auto' | 'manual' | 'auto' | Controls whether focus movement also selects the active tab. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Changes arrow-key behavior and reflected orientation hooks. |
scrollButtons | 'auto' | 'off' | 'on' | 'off' | Enables scroll-button visibility logic for overflowed tablists. |
loop, dir, disabled, lazy, keepAlive | primitive forwarded inputs | varies | Forwarded directly through the wrapper to the primitive root. |
(valueChange), (tabChange), (focusChange) | events | — | Emitted by the primitive root and re-exposed by the wrapper. |
Tablist, tab, and panel
The wrapper does not replace tngTabList, tngTab, or tngTabPanel. You still import and author those parts explicitly.
| Part | Selector | Important inputs | Notes |
|---|---|---|---|
| Tab list | [tngTabList] | ariaLabel, ariaLabelledby | Provides the required tablist role and registration surface. |
| Tab trigger | [tngTab] | value, disabled, panelId | Reflects selection, focus, and disabled state through stable data attributes. |
| Tab panel | [tngTabPanel] | value, labelledById, unmountOnExit | Uses hidden when inactive and can unmount on exit if requested. |
Primitive foundation
The wrapper only adds the default root shell and the optional ariaLabel input. Selection logic, roving focus, keyboard handling, and panel lifecycle all still belong to the headless tabs primitive.