Skip to main content

Radiobutton

A component that enables users to choose a single option from a set of mutually exclusive choices. Radio buttons provide clear visual feedback for the selected state, and are commonly used in forms and settings.

Key Features​

  • Interactive feedback

    Responsive feedback for different interaction states, reassuring users of its functionality.

Variants​

The Radio Button consists of three elements: Radio Button Control, Label, and Helper Text. The Radio Button serves as a visual cue for users when they alter its state by clicking or tapping.

The Label and Helper Text are optional, meaning you can choose to show or hide them as needed. The Label describes the Radio Button choice, while the Helper Text provides extra guidance.

Label Component

Helper text Component

Radiobutton anatomy
    1. Radiobutton Control
    2. Label
    3. Helper Text
Selection variant

Features two variants - Unchecked and Checked - to effectively represent different selection states and facilitate user interactions within the interface.

States

Provides visual feedback and enhances user awareness of interaction possibilities within the interface. Features multiple states, adapting to its current usage context.

PropertyValuesDefault value
Checked
Yes / No
No
Label
Yes / No
No
Helper Text
Yes / No
No
State
Normal, Hover, Focus, Alert, Alert Focus, Disabled
Normal

Grouping Options

Grouping Options

Behaviors​

Wrapping label

When the text is too long for the available horizontal space, it wraps to another line.

When use Helper Text

Use Helper Text if additional information is important and necessary to explain differences or to ensure that the user receives all the necessary information to take action.

Best Practices​

Single selection

The radio button is used when the user has to make a single selection. Only one radio button can be selected from the group. If you want to give multiple choices, use a Checkbox Component instead. 
Do

“None” option

Remember that with a radio button, it is impossible to leave all fields unselected, so if you want to allow an unselected state, you should add a radio button with a "None" or option that represents an Inactive state such as “Never”.
Do

Default option

You should leave one radio button selected as the "default" option if possible. It is crucial that it is the safest or most useful option for the user.
Do

Don’t overcrowd

If there are several familiar options to choose from (more than five or six), using the Select Component may be a better choice.
Do
Don't

Easy to scan

The list of options to choose from should be arranged in a logical order, selected according to the specific case. It will help reduce the time to make a choice. 
Do
Don't

Content Guidelines​

Carefully considered options

Do not overwrite options. A common mistake is giving age ranges 20-30, and 30-40, which results in a 30-year-old not knowing what to choose. 
Do
Don't

Keep labels clear

Labels for Radio Buttons must be clear, easy to understand, and use easy language accessible to everyone. A good practice is to always test your labels for clarity.
Do
Don't