Radio Group

Installation

npx @yolkui/cli add radio-group

Descriptions

Put a FieldDescription in an item's FieldItem, under its label: it lines up with the label's text and is read after the label. Items move 16 apart instead of 12.

Horizontal

orientation="horizontal" puts the items in a row, 24 apart, and the legend on its own line above. Keep it to two or three short options; a longer list reads better stacked.

Invalid

The Field around the group holds one error for all of it. An invalid group rings every radio in red; red is never the only signal, so pair it with a FieldError that says what to do.

Disabled

A disabled option fades with its label and cannot be picked. Arrow keys still land on it, without selecting it, and it keeps pointer events, so a Tooltip around the radio can say why, on hover and on keyboard focus. disabled on the RadioGroup turns off every option.

Accessibility

Screen readers hear the legend when focus enters the group, then the label, whether it is chosen, and its place in the group. Tab enters on the chosen option; arrow keys move and choose.

• Put each option in a FieldItem with a FieldLabel: the label names the radio and a click on its text picks it. A Field around the group holds its validity and one FieldError. Outside a Field, a Label after the radio with htmlFor works too.
• Name the group with a FieldLegend inside it, or aria-label when the heading is elsewhere.
• The circle is 16px; the area that takes a click is 24px, and the whole label.
• Once one option is chosen, one always is: use radios when the choice is required, a Checkbox when it can be undone.