ual: Design System
Radio
A single-choice input that always appears in a group. Users can select exactly one option.
When to use
- Use a radio button when users must choose exactly one option from a set of mutually exclusive choices
When not to use
- If users can select more than one option, use a checkbox instead. Radio buttons enforce a single selection, which creates the wrong expectation in a multi-choice context
- Fo a binary setting that takes effect immediately, such as turning a feature on and off, use a switch chip instead
Content guidance
- Write labels as plain statements, not questions
- Keep labels short enough to read at a glance. If you need more than one line, consider whether the option needs more context elsewhere on the page
- In a group, make each label distinct so users can tell the options apart without reading them in sequence
Accessibility
This component is designed with accessibility built in:
- Colour contrast meets 4.5:1 for the label text and 3:1 for the checkbox control across all states
- Touch target meets the minimum 44x44px tap area
- Focus state is visually distinct from the default and selected states
When implementing, verify:
- Radio button groups are wrapped in a fieldset with a legend that describes the group
- Individual radio buttons have labels that make sense when read in isolation by a screen reader