Radio group
A group of the kit's radios, nol-radio-group, with the role radiogroup and its label as its accessible name. Its radios, stacked 0.5rem apart, share a name of its own, and its value is the picked radio's value.
Examples
Loading…
States
Loading…
API
Selector nol-radio-group
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Required | The group's accessible name, such as the question it answers. |
value | string | null | The picked radio's value, or null when none is picked; null when not bound. It changes when the person picks a radio. Two-way: bind it as |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus into the group, onto its checked radio, or its first when none is checked, and then past the group. |
| Arrow Down | Moves the focus to the next radio in the group and picks it, wrapping at the end; Arrow Right does the same. A disabled radio takes the focus without being picked. |
| Arrow Up | Moves the focus to the previous radio in the group and picks it, wrapping at the start; Arrow Left does the same. |
| Space | Picks the focused radio; a disabled one refuses it. |
The group has the radiogroup role and is named by its label, set as aria-label.
It gives its radios one shared name, so its checked radio, or its first when none is checked, is the group's one Tab stop, and the arrow keys move the choice and the focus together.
While a radio in it has the focus, that radio is the group's Tab stop, so Tab leaves the group even from a disabled radio the arrow keys reached.
Specification
Loading…