---
# System prepended metadata

title: Radio buttons
tags: [DS DONE]

---

---
tags: DS DONE
---


# Radio buttons
Radio buttons allow the user to select one single item in a list. 

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option. 



## Types

IMAGE

1. **Default**
Mainly used when building a form, this version of the radio button is displayed without any styling whatsoever. 

## States

IMAGE

1. **Basic state - Unselected**
State visible by default with no option selected.

2. **Hover state**
State visible when the cursor hovers the input and the label. Elements are displayed in another colour depending on the type of radio button. Cursor becomes a pointer.

3. **Focused state**
State visible when users select the radio button via tab key. All elements are highlighted.

3. **Selected state**
State visible with option is selected.

4. **Disabled state**
State visible if the radio button is not clickable. All elements are displayed but they are greyed out in order to signify the change of state.

5. **Error state**
State visible when a radio button should be checked and it's not the case. All elements are displayed in another colour in order to signify the error state.

## Anatomy
IMAGE


Users should be able to select the radio button by clicking on the input directly or by clicking on its label.

1. **Input**
By default empty, the input is filled with a colored "check mark" when clicked.

2. **Label**
Labels appear to the right of inputs and indicate the option(s) that will be selected when clicked.

> [ACCESSIBILITY] 
> * **Use the label as a target.** Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option.
> * **List items vertically.** Options that are listed vertically are easier to read than those that are listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which radio button.
> * **Use adequate spacing.** If you customize, make sure selections are adequately spaced for touch screens.
> * **Set default values with caution.** Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. If you are unsure, leave nothing selected by default.


## Related elements
### Radio button vs selected boxe
TBD
[More info about selected boxe](https://)

### Radio button vs checkbox
Whereas radio buttons represent a group of mutually exclusive choices, users can select one or more checkboxes from a group. In use cases where only one selection of a group is allowed, use the radio button component instead of the checkbox.
[More info about checkboxes](https://)

### Radio button vs. switch
Generally, toggle switches are preferred when the resulting action will be instantaneously applied, without the need for further confirmation. Checkboxes generally represent one input in a larger flow which requires a final confirmation step.
[More info about switch](https://)

### Radio button vs. dropdown
If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.
[More info about dropdown](https://)