# Selection controls
## 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.
{% hint style="info" %}
Note that usually, [Switch Button](https://zeroheight.com/065715af6/v/latest/p/30b43c-switch-button/b/20a137) is considered a`Selection Controls` component. However, we have decided to consider it a [`Button`](https://design.mirakl.com/design/components/actions/buttons) because it has an `Auto-Save` behavior, unlike the listed components here. Selection Controls components must follow Form Save behavior.
{% endhint %}
{% hint style="info" %}
💡**How to manage errors?** [Learn more about Error Management](https://design.mirakl.com/design/patterns/errors)
{% endhint %}
## 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.
{% hint style="warning" %}
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.
{% endhint %}
{% hint style="info" %}
In a form, a `Checkbox` cannot be in an '`Indetermined`' state; users can only select or unselect an item.
{% endhint %}
### 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.
{% hint style="info" %}
Using a radiogroup means selection is mandatory for users. Therefore, the asterix can not be removed.\
If selection is not mandatory, use `Checkbox Group`.
{% endhint %}
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.
{% hint style="info" %}
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.
{% endhint %}
### Radiogroup (Card)
`Radiogroup Card` is a variant of the`Radiogroup` 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.
{% hint style="info" %}
Template: \
{% endhint %}
### **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.
{% hint style="info" %}
Template: \
{% endhint %}
