Radio

Square, with a centred square dot. It rounds only under the soft and round radius presets.

input[type=radio]CSS only

Anatomy

`fieldset`	Groups the options; the `<legend>` names the group.
`> label`	One per option. A label whose direct child is a radio lines dot and text up in a row.
`label > input[type=radio]`	The native radio, no class. All radios in a group share a `name`.

API

Attribute	Values	Description
`checked`	boolean	Fills the box with the accent and springs the dot in. One per group.
`name`	`<text>`	Radios with the same name form one group: checking one unchecks the others.

Accessibility

Put a group in a <fieldset> with a <legend>, or give its container role="radiogroup" and an aria-label.
With none checked, Tab lands on the first radio and the arrow keys check as they move, so check a sensible default when there is one.
A disabled radio dims and its label turns muted. Say why the option is unavailable, or leave it out.

Key	Effect
`↑` / `↓` / `←` / `→`	Moves to the previous or next radio in the group and checks it.
`Space`	Checks the focused radio when none in the group is checked.
`Tab`	Enters the group at the checked radio, and leaves it; the group is one tab stop.