Radio

@summonware/ui · radio · P0 · Forms

Usage

Exactly one choice from a small visible set. Radios sharing a `name` form a group, and the browser handles arrow-key navigation within it. Prefer radios over a Select when there are five or fewer options — visible choices are faster than a menu the user must open to read.
import { Radio } from '@summonware/ui';

Best practices

DoGive every radio in a group the same `name`, and wrap the group in a fieldset with a legend.
DoDefault to the safest or most common option rather than leaving the group empty.
Don'tUse a single radio. One radio cannot be unchecked — that is a checkbox.
Don'tUse radios for more than about seven options. That is a Select.

Examples

Common configurations, variations and states.

Group

Delivery speed
A fieldset with a legend is what makes this a labelled group for assistive tech, not three loose controls.

Unavailable option

Plan
Disable individual options rather than hiding them, so the set stays stable and the absence is explained.

Reference variants

2 of 2 labels from the reference are demonstrated above.

Where it appears

Used on 4 catalogued screens, including admins-course-pricing, application-ec-checkout, application-ec-product-detail, application-user-profile-social.