Choice row

A choice row, nol-choice-row: a radio or a checkbox with a label and an optional muted description under it, the whole row being the control's hit target. The mark stays centered on the label's first line however the label wraps, and a long word breaks rather than widening the row. A radio row inside a RadioGroupComponent takes part in the group as a RadioComponent does.

Examples

Loading…

States

Loading…

API

Selector nol-choice-row

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`type`	`ChoiceRowType`	`ChoiceRowType.Radio`	The control the row holds; `ChoiceRowType.Radio` when not bound.
`value`	`string`	`String.empty`	The value a radio row stands for, which its group takes when the person picks it; empty when not bound. A checkbox row ignores it.
`label`	`string`	Required	The row's label, which names its control.
`description`	`string \| null`	`null`	A second line under the label, in the muted text color, or null for none; null when not bound.
`checked`	`boolean`	`false`	Whether a checkbox row is checked, or a radio row outside a group is picked; false when not bound.
`disabled`	`boolean`	`false`	Whether the row is disabled, which dims its control, and the person cannot change it; false when not bound. Its control stays focusable, as a disabled `RadioComponent` or `CheckboxComponent` does, so a person whose rows turn disabled while an answer is sent keeps their place.

Outputs

Name	Type	Description
`checkedChange`	`boolean`	Emits whether the control is checked each time the person changes it: a checkbox each toggle, a radio true each time it is picked.

Accessibility

Key	Action
`Tab`	Moves the focus to the row's radio or checkbox; radio rows in a group are one Tab stop.
`Arrow Down`	In a radio group, moves the focus to the next row and picks it; a disabled row takes the focus without being picked.
`Arrow Up`	In a radio group, moves the focus to the previous row and picks it.
`Space`	Picks the focused radio row, or checks or clears the focused checkbox row; a disabled row refuses it.

A row is a radio or a checkbox whose label holds the row's label and description, so the whole row is its hit target and its text names it.

Radio rows go in a radio group, which has the radiogroup role and gives the rows one Tab stop and the arrow keys; checkbox rows take their own checked, and their owner groups them under a label, with the group role and aria-labelledby.

A disabled row's radio or checkbox is marked aria-disabled, so the row stays focusable and the arrow keys still reach it, and nothing changes when it is activated.

Specification

Loading…