Radio

The kit's radio, nol-radio, a native radio with a drawn dot whose content is its label, which is part of its hit target. Inside a RadioGroupComponent it is picked when the group's value is its value, and picking it sets the group's value; the radios of one group share a name, so the arrow keys move between them and pick, and only the picked one, or the first when none is, or, while one has focus, that one, is in the Tab order. A disabled radio stays in the arrow keys' path: they move the focus onto it but do not pick it. Outside a group it keeps no state of its own: its owner binds RadioComponent.checked.

Examples

Loading…

States

Loading…

API

Selector nol-radio

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`value`	`string`	Required	The value the radio stands for, which its group takes when the person picks it.
`checked`	`boolean`	`false`	Whether the radio is picked when it is not in a group; false when not bound. Inside a group, the group's value decides.
`disabled`	`boolean`	`false`	Whether the radio is disabled, which dims it and its dot, and the person cannot pick it; false when not bound. A disabled radio stays focusable and keeps focus when it turns disabled, is marked `aria-disabled="true"`, and refuses a click, Space or an arrow key's pick; focused, it keeps its focus outline at full strength.

Outputs

Name	Type	Description
`checkedChange`	`boolean`	Emits true each time the person picks the radio.

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 kit styles the browser's own radio, inside a label that holds its text, so it has the radio role, reports whether it is checked, and is named by its text.

In a radio group the radios share one name, so the browser gives the group one Tab stop and its arrow keys; a radio on its own takes its checked from its owner.

A disabled radio is marked aria-disabled rather than natively disabled: it stays focusable and the arrow keys reach it, but a click, Space or an arrow key never picks it.

The dot is drawn over the circle and hidden from assistive technology with aria-hidden.

Specification

Loading…