Radio Button

🧭 When to Use a Radio Button

Use a Radio Button when:

• Users must choose only one option from a predefined list

• You want to present choices side-by-side, with no ambiguity

• You want a clear, consistent interaction pattern for selection

Avoid using Radio Buttons when:

• Multiple selections are allowed — use a Checkbox

• You’re toggling between two states — use a Switch

⚪ Radio Item

The Radio Item is the visual indicator — a small circle — that shows whether the option is selected or not.

🎯 Statuses

• Default – Inactive, no hover or interaction

• Hover – Border and background subtly shift to indicate interactivity

• Focus – Focus ring or outline appears for keyboard users

• Disabled – Dimmed and non-interactive

🎨 Types

• Unselected – The radio is empty

• Selected – A filled inner dot is visible

• Indeterminate – Not applicable — radios are always fully selected or unselected

Unlike checkboxes, radios do not support indeterminate states.

📏 Sizes

• Large (lg) – Use in layouts with more white space or mobile views

• Medium (md) – Default; suitable for most forms and desktop layouts

Size controls the radio itself, label spacing, and font size.

🧩 Radio Button (Component)

The full Radio Button component combines:

• A Radio Item (interactive circle)

• A Label – Primary descriptor of the choice

• Optional Subtext – Additional detail or explanation below the label

Subtext visibility is controlled via a layer property toggle in Figma.

This composite supports the same statuses and sizes as the Radio Item itself.

♿ Accessibility Considerations

From a design perspective:

• Keep label text clear and placed directly beside the radio item

• Ensure a visible focus state for keyboard users

• Use spacing and alignment tokens to maintain clean vertical rhythm

From a code perspective (if implemented):

• Use <input type="radio"> for each option

• Associate labels using <label> or for + id attributes

• Group radios using the same name attribute so only one can be selected

• Include aria-describedby for subtext and validation states when present

✅ Best Practices

• Use radios when selection is required — and always mark optional groups clearly

• Don’t leave all radios unselected if a default choice makes sense

• Use subtext sparingly and only when needed to clarify differences between options

• Stack vertically in forms unless space or logic calls for horizontal alignment

• Never mix checkboxes and radios in the same group — keep the selection logic consistent