API reference
Headless tabs are split into one root directive and explicit parts for the list, tab triggers, panels, and optional overflow buttons.
Directive selector
The root directive is [tngTabs]. Place tngTabList, tngTab, and tngTabPanel inside the same root so the primitive can register and synchronize them.
Selection and focus
| Root input / output | Type | Default | Notes |
|---|---|---|---|
value, defaultValue | string | number | null | undefined | Controlled and uncontrolled selection inputs. |
activation | 'auto' | 'manual' | 'auto' | Decides whether focus movement immediately selects the tab. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Changes arrow-key behavior and reflected orientation hooks. |
scrollButtons | 'auto' | 'off' | 'on' | 'off' | Enables overflow scroll-button registration. |
loop, dir, disabled, lazy, keepAlive | behavior inputs | varies | Control navigation wrapping, direction, disabled state, and panel mount lifecycle. |
(valueChange), (tabChange), (focusChange) | events | — | Emit when selection or roving focus changes. |
Tab and panel parts
| Part | Selector | Important inputs | Notes |
|---|---|---|---|
| Tab list | [tngTabList] | ariaLabel, ariaLabelledby | Reflects role="tablist" and participates in overflow measurement. |
| Tab | [tngTab] | value, disabled, panelId | Reflects aria-selected, data-selected, and roving focus. |
| Panel | [tngTabPanel] | value, labelledById, unmountOnExit | Reflects hidden and data-active based on selection. |
| Scroll buttons | [tngTabsScrollButtonPrev], [tngTabsScrollButtonNext] | none | Optional overflow controls when you author large tab strips. |