Choice card
A selectable card around a radio or checkbox. Selection is the one state that earns a ring.
Examples
Plans
Anatomy
label.choice | The card: a filled row that is the label for its input. |
> input[type=radio] | A radio or checkbox, drawn as usual at the start of the card. |
> span | The text column. |
span > b | The option's title. |
span > small | Optional detail line, muted. |
API
| Attribute | Values | Description |
|---|---|---|
checked | boolean | On the input: tints the card with the accent and draws a 1.5px accent ring. |
Accessibility
- The whole card is the label, so its name is the title plus the detail line. Keep the detail short.
- Group the cards in a
<fieldset>with a<legend>(orrole="radiogroup"with anaria-label) so the question is read with the options. - Keyboard focus replaces the selection ring with the focus ring while the card has focus.
| Key | Effect |
|---|---|
| ↑ / ↓ / ← / → | With radios: moves the selection between cards. |
| Space | With checkboxes: toggles the focused card. |