Radio Group primitive

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

@ndop/primitives/radio-group
WAI-ARIA: Radio Group

Import

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

import {
  NdRadioGroup,
  NdRadioGroupIndicator,
  NdRadioGroupItem,
} from '@ndop/primitives/radio-group';

Accessibility

Implements the Radio Group pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus into the group, to the checked item or, if none, the first; then out of it.
`Space`	Checks the focused item, if it isn't checked.
`Enter`	Does nothing, as for native radio buttons; the default is prevented.
`ArrowDown`or`ArrowRight`	Moves focus to the next enabled item and checks it; from the last, wraps to the first.
`ArrowUp`or`ArrowLeft`	Moves focus to the previous enabled item and checks it; from the first, wraps to the last.

Focus

Arrow keys move focus and the selection together; disabled items are skipped.
Clicking an item focuses and checks it.
Focus leaving the group marks a bound field touched.

Right-to-left

In right-to-left layouts, ArrowLeft moves to the next item and ArrowRight to the previous one. Direction comes from the nearest dir attribute, on the item or an ancestor.

API reference

NdRadioGroup

[ndRadioGroup]role radiogroupfrom @ndop/primitives/radio-group

Headless radio group: the WAI-ARIA radio group pattern, a set of button[ndRadioGroupItem]s of which one at most is checked. Only one item is in the tab order, and arrow keys move focus and the selection together, wrapping, mirrored in right-to-left layouts. 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).

Manages aria-orientation, aria-required, aria-invalid, aria-disabled.

NdRadioGroup binding	Type	Default
`[defaultValue]` Initial `value` when it isn't bound.	`string \| null`	`null`
`[orientation]` The items' layout, for `aria-orientation` and `data-orientation`. All four arrow keys work either way.	`'vertical' \| 'horizontal'`	`'vertical'`
`[disabled]` Disables every item. A disabled bound field does too.	`boolean`	`false`
`[required]` Marks the group required: `aria-required="true"`.	`boolean`	`false`
`[invalid]` Marks the group invalid when no forms library is bound; with one, the field's state decides.	`boolean`	`false`
`[(value)]` The checked item's value, or `null` when none is checked. Two-way bindable with `[(value)]`.	`string \| null`	`null`

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

NdRadioGroupIndicator

[ndRadioGroupIndicator]from @ndop/primitives/radio-group

The dot of a NdRadioGroupItem. It has the hidden attribute while its item is unchecked.

Data attribute	Values
`data-state`	—

NdRadioGroupItem

button[ndRadioGroupItem]role radiofrom @ndop/primitives/radio-group

One radio button of a NdRadioGroup, on a native button. Name it with a label[ndLabel] whose for is its id, or with aria-label.

Manages aria-checked.

NdRadioGroupItem binding	Type	Default
`[value]`required The value the group takes when this item is checked.	`string`	`—`
`[disabled]` Disables this item; arrow keys skip it.	`boolean`	`false`

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