Switch primitive

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

@ndop/primitives/switch
WAI-ARIA: Switch

Import

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

import { NdSwitch, NdSwitchThumb } from '@ndop/primitives/switch';

Accessibility

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

Keyboard

Keys the component handles.

Key	Action
`Space`	Turns it on or off.
`Enter`	Turns it on or off.

Focus

Unchanged from a native button: activating it keeps focus on it.
Leaving it marks a bound field touched.

Right-to-left

The thumb's position is styling: the styled item moves it toward the end side, so it mirrors in right-to-left layouts.

API reference

NdSwitch

button[ndSwitch]role switchfrom @ndop/primitives/switch

Headless switch on a native button: the WAI-ARIA switch pattern, an on/off control that takes effect at once. It owns its value, so it's a ControlValueAccessor that Signal Forms ([formField]), reactive and template-driven forms bind (ADR-0004, amendments 1 and 4). Space and Enter turn it on or off. A label whose for is its id does too.

Manages aria-checked, aria-required, aria-invalid.

NdSwitch binding	Type	Default
`[defaultChecked]` Initial `checked` when it isn't bound.	`boolean`	`false`
`[disabled]` Disables it. A disabled bound field disables it too.	`boolean`	`false`
`[required]` Marks it required: `aria-required="true"`.	`boolean`	`false`
`[invalid]` Marks it invalid when no forms library is bound; with one, the field's state decides.	`boolean`	`false`
`[id]` Element id; also the key a `label[ndLabel]` uses to find it.	`string \| undefined`	`—`
`[(checked)]` Whether it's on. Two-way bindable with `[(checked)]`.	`boolean`	`false`

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

NdSwitchThumb

[ndSwitchThumb]from @ndop/primitives/switch

The thumb of a NdSwitch: presentational, with the switch's data-state for styling its position.

Data attribute	Values
`data-state`	—