Tabs primitive

Headless Tabs: the behavior, keyboard support and ARIA of the WAI-ARIA Tabs pattern, with no styles.

@ndop/primitives/tabs
WAI-ARIA: Tabs

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Tabs is built on this one.

import {
  NdTabs,
  NdTabsContent,
  NdTabsList,
  NdTabsTrigger,
} from '@ndop/primitives/tabs';

Accessibility

Implements the Tabs pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus into the tab list, to the selected tab; then to the active panel.
`ArrowRight`or`ArrowLeft`	In a horizontal list, moves focus to the next or previous enabled tab, wrapping; selects it if automatic.
`ArrowDown`or`ArrowUp`	In a vertical list, moves focus to the next or previous enabled tab, wrapping; selects it if automatic.
`Home`	Moves focus to the first enabled tab; selects it if automatic.
`End`	Moves focus to the last enabled tab; selects it if automatic.
`Enter`or`Space`	Selects the focused tab.

Focus

The selected tab is the list's only tab stop; arrow keys move focus without leaving the list, and disabled tabs are skipped.
Clicking a tab focuses and selects it.

Right-to-left

In a horizontal list in a right-to-left layout, ArrowLeft moves to the next tab and ArrowRight to the previous one. Direction comes from the nearest dir attribute.

API reference

NdTabs

[ndTabs]from @ndop/primitives/tabs

Root of a set of tabs: the WAI-ARIA Tabs pattern, layered sections of content shown one at a time. It holds which tab is selected; its NdTabsList holds the tabs and each NdTabsContent a panel.

NdTabs binding	Type	Default
`[defaultValue]` Initial `value` when it isn't bound.	`string \| null`	`null`
`[orientation]` The tab list's layout: which arrow keys move between tabs.	`'vertical' \| 'horizontal'`	`'horizontal'`
`[activationMode]` Whether moving focus to a tab selects it.	`'automatic' \| 'manual'`	`'automatic'`
`[(value)]` The selected tab's value, or `null` before one is selected. Two-way bindable with `[(value)]`.	`string \| null`	`null`

Data attribute	Values
`data-orientation`	—

NdTabsContent

[ndTabsContent]role tabpanelfrom @ndop/primitives/tabs

The panel of the tab with the same value (role="tabpanel"). It's hidden while its tab isn't selected, and stays in the document.

Manages aria-labelledby, id, tabindex, hidden.

NdTabsContent binding	Type	Default
`[value]`required The value of the tab that shows it.	`string`	`—`

Data attribute	Values
`data-state`	—
`data-orientation`	—

NdTabsList

[ndTabsList]role tablistfrom @ndop/primitives/tabs

The list of tabs (role="tablist"). Name it with aria-label or aria-labelledby.

Manages aria-orientation.

Data attribute	Values
`data-orientation`	—

NdTabsTrigger

button[ndTabsTrigger]role tabfrom @ndop/primitives/tabs

One tab (role="tab"), on a native button: it selects the panel with the same value. Only the selected tab is in the tab order; arrow keys, Home and End move between tabs.

Manages aria-selected, aria-controls, id, tabindex.

NdTabsTrigger binding	Type	Default
`[value]`required The value of the panel it shows.	`string`	`—`
`[disabled]` Disables it; arrow keys skip it.	`boolean`	`false`

Data attribute	Values
`data-state`	—
`data-disabled`	—
`data-orientation`	—