Radio
Radio cards let users choose one option from a set of mutually exclusive choices. Each card pairs a radio indicator with a label and an optional description, making it easy to compare options at a glance without needing a separate legend or tooltip.
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | Unique identifier passed back via onChange when this option is selected. |
label | string | required | The primary option label shown in bold. |
description | string | — | Optional supporting text shown below the label. |
checked | boolean | required | Whether this option is currently selected. |
onChange | (value: string) => void | required | Called with this option’s value when the user selects it. |
disabled | boolean | false | Prevents interaction and reduces opacity. |
name | string | — | Groups multiple radios for native form behaviour and keyboard navigation. |
usage
Use radio cards when users need to pick exactly one option from a short list and the description helps them make an informed choice. Always pass the same name prop to all radios in a group so native keyboard navigation works correctly.
When to use
- Choosing one option from 2–5 mutually exclusive choices
- When the description helps users understand the trade-offs of each option
Do not use
- When users can select more than one option — use a checkbox instead
- For more than 5 or 6 options — use a select or dropdown instead
- As a single standalone option — a lone radio is always unselectable; use a checkbox
DoTwo or three options with helpful descriptions
Don’tToo many options — use a select or dropdown instead
states
DefaultTransparent background, neutral border, empty indicator
HoverSubtle brand surface appears on cursor over
SelectedBrand surface and indicator, greenish border