Radio

Radio buttons allow users to select one option from a set.

Released

Show details

Radio buttons are input controls that allow users to select one single option within a range of multiple options.

Component	Usage	Placement	User action
Radio	Radio buttons allow users to select one single option from a set.	Can be placed everywhere within the grid system.	On click, the state toggles.

Similar components	Usage	Placement	User action
Checkbox ↗	Used in forms to select one or more options within a given list of items.	Same as above.	Same as above.
Toggle ↗	While checkboxes are used to select, toggle buttons are used to activate or deactivate options	Same as above.	Same as above.

Anatomy

Structure

Input control	Gives the possibility to the user to select the option.
Label	Indicates the name of the information asked the user.

Sizes and Spaces

	The distance between the input control and the label should be 8px. Within a list, there should be a spacing of 16px between each radio option.

Properties

Property	Value	Description
Selected	true false	---
State	default disabled read-only	---

Behaviour

Responsiveness

The text label adapts to the width of the container. When there is text wrap, the input control is centred vertically with the text.

Guidelines

⛔️ Don't
Don't use radio buttons when there is only one option listed for the user. Use checkboxes instead.

⛔️ Don't
Don't use radio buttons when there is only one option listed for the user. Use checkboxes instead.