Checkbox primitive

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

@ndop/primitives/checkbox
WAI-ARIA: Checkbox

Import

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

import { NdCheckbox, NdCheckboxIndicator } from '@ndop/primitives/checkbox';

Accessibility

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

Keyboard

Keys the component handles.

Key	Action
`Space`	Checks or unchecks it; a mixed checkbox becomes checked.
`Enter`	Does nothing, as for a native checkbox (APG); the default is prevented.

Focus

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

Right-to-left

Nothing mirrors.

API reference

NdCheckbox

button[ndCheckbox]role checkboxfrom @ndop/primitives/checkbox

Headless checkbox on a native button: the WAI-ARIA checkbox pattern, dual-state or, with indeterminate, mixed. 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 toggles it; Enter does nothing, as for a native checkbox. A label whose for is its id toggles it too.

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

NdCheckbox 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 checked. Two-way bindable with `[(checked)]`.	`boolean`	`false`
`[(indeterminate)]` Whether it's mixed: `aria-checked="mixed"` whatever `checked` is. Activating it clears this. Two-way bindable.	`boolean`	`false`

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

NdCheckboxIndicator

[ndCheckboxIndicator]from @ndop/primitives/checkbox

The checkmark of a NdCheckbox. It has the hidden attribute while the checkbox is unchecked, so what's inside shows only while it's checked or mixed.

Data attribute	Values
`data-state`	—