Selection controls

Selection controls are specific components to let users control different kinds of options, settings, or situations.

Overview

Selection controls are form components allowing users to select one (Radiogroup) or several (Checkbox) options within a list.

They differ from Pickers as they don't have fields and, therefore, no overlays. Thus, all options are fully displayed on the screen. To not overflood users with tons of options, we recommend thinking carefully about the number of options displayed. Too many options will appear complex for users, long to read, and difficult to distinguish from another. Reduce to a minimum number of options if possible.

The following components are worthwhile in use cases, such as selecting a configuration (user profile, type of company,...) or activating options.

Note that usually, Switch Button is considered aSelection Controls component. However, we have decided to consider it a Button because it has an Auto-Save behavior, unlike the listed components here. Selection Controls components must follow Form Save behavior.

💡How to manage errors? Learn more about Error Management

Guidelines

Checkbox

Checkbox is a form element. Each checkbox must be given a label and contain a link. Adding a help text is a good practice if the label is not self-explanatory enough, but it must bring added value.

While it is technically possible to add a tooltip to the label, it is better to use a Helptext to add content to each option.

In a form, a Checkbox cannot be in an 'Indetermined' state; users can only select or unselect an item.

Checkbox Group

Checkbox Group is a list of items in which users are free to select one option, no option at all, or several options. There is interdependence between checkboxes in a group.

Each checkbox must be given a label. Adding a help text is a good practice if the label is not self-explanatory enough, but it must bring added value. For consistency issues, all labels must have a helptext or none at all.

Radio Group (Default)

Radiogroup requires users to choose one option in a list of minimum 2 options. The selection of a radio button, therefore, prevents the selection of other radio buttons in the same group. There is no limitation to the number of options.

Each radio button must be given a label and can have a helptext. For consistency issues, all items must have a helptext or none at all. Also, if needed, a global label for the Radiogroup component is available.

Using a radiogroup means selection is mandatory for users. Therefore, the asterix can not be removed. If selection is not mandatory, use Checkbox Group.

Depending on the page layout, 2 directions are available:

  • Column: each radio element will be stacked one above the other. This direction will be preferred for long labels if you want to add help texts to each element.

  • Row: each radio element will be stacked next to the other. This direction will be preferred to short labels.

It is also possible to group or split radio buttons per type or theme in order to classify them while keeping the validation rules.

When possible, if one of the options seems more logical, set is as default. It means the options will already be selected without any actions from the user. In this case, you must write it down in the Label to communicate to users why it has already been selected.

Radiogroup (Card)

Radiogroup Card is a variant of theRadiogroup component. It has the same guidelines and behavior (see above).

Radiogroup Card has a different UI, as each option is contained in the card (outline stroke). It visually helps users to differentiate options when content is too long or uneven between options. The component width has to fill its container.

It is also possible to group or split radio buttons per type or theme in order to classify them while keeping the validation rules.

Content

Label

Use a noun, no preposition, no action verb.

Template: <Noun>

Help text

Prefer a help text over a tooltip to add extra details, and explain how to fill the field or its purpose. If you are just repeating yourself, don’t use a help text.

Template: <Optional sentence giving extra information on how this content will be used or why it's important.>

Last updated

Was this helpful?