Radio

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.

Overview

Warning

A radio button can't be used alone, it must be used within a group.

Radio button group is a combination of the following mentions. Please note that you can use four different cases:

Group label + radio buttons
Group label + requirement + radio buttons
Group label + requirement + help text + radio buttons
Groupe label + help text + radio buttons

Label group

The label group helps the user to understand which radio to check.

Requirement

This mention allows to specify that this information is mandatory for the input to be valid.

Useful tip

Please note that this mention can also be used to say a specific input is optional when the other ones are mandatory.

Help text

Help text corresponds to a relevant piece of information to make sure the user understands what is needed.

Note that the elements become horizontally aligned from the m-medium breakpoint (768px). Below this resolution, the elements are arranged vertically.

Validation

There are two different elements for validation feedback:

The color of the input outline.
A text under the radio button group explains what's wrong with the data entered.

Do's and Don'ts

A radio buttons list must include a minimum of two options.

Use short radio list. User should be able to scan quickly between few option. If you have a lot of option, prefer a drop down list.

Preselect an option for the user whenever possible.

Never use the radio alone. You should always use it with a label and within a group.