Radio
Also known as: Radio button, Option button
Resources
Properties
| Property | Values | Default |
|---|---|---|
Selected Boolean | true | false | false |
State Variant | Default | Hover | Focus | Error | Disabled | Default |
Has label Boolean | true | false | true |
Label Text | string | Label |
Label position Variant | Start | End | End |
When to use
Use if users must select only one option from the list.
When choices or options are clear and distinct from each other, requiring users to make a deliberate selection.
When there is only one option, use checkbox instead for enabling or disabling a setting.
When multiple options can be selected, use checkbox instead.
When the list of options is too long, use select instead.
Behaviour
Selection
Radio has two selection states:
- Usually,
uncheckedstate is the default, where no option should be assumed, ensuring users consciously select an option before proceeding. - Depending on the context,
checkedstate can also be used as the default, when for example there is a highly common or recommended choice, or users have previously selected an option and the system remembers their choice.
States
Radio (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Error | Used when an invalid action occurs. Component may appear red or display helper, signaling an issue that needs resolution. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |