Radiobutton

Overview

Radio buttons are used when users need to select one option from a set of mutually exclusive choices. They are commonly used in forms, surveys, and settings where users need to make a single selection from a list of options.

The benefit of using radio buttons over select is that users may easily scan the available options and make a quick selection.

Variants

• Default: used in most cases.
• Contained: used only in combination with other contained form components.
• Contained extended: The contained version but including Label support text.

Default

Contained

Contained extended

Features

Label support

May be used for both the group label, and for each individual radio button in the group. Try to be consistent if using them on the individual buttons.

Label support for radio button

Error handling

If an error occur s we mark the entire group of options with error. The error is described with an error message

Error handling for radio button

Behaviour

• Mutual Exclusivity: Only one radio button within a group can be selected at a time.
• Defaults: Aim for having one option pre-selected.

Alignment

We can align the radio buttons both horizontal and vertical.

• Horizontal: works best with very few options, this also saves space.
• Vertical: works best if there's more than two options, easier to scan and select.

Do's and Don'ts

Do:

• Use descriptive labels to clearly indicate the purpose of each radio button.
• Keep the text as short as possible.
• There needs to be at least two options.
• Try to sort the options in a logical order.

Don't:

• Use radio buttons for non-mutually exclusive options; consider checkboxes instead.
• Overload users with too many radio buttons in a question. If you have to present a lot of options, use a select.
• Mix default and contained versions.