---
# System prepended metadata

title: Checkboxes
tags: [DS DONE]

---

---
tags: DS DONE
---


# Checkboxes
Checkboxes allow the user to select one/multiple items in a list or to digitally sign contracts/conditions.

## Types
![](https://i.imgur.com/xIKzDRX.jpg)


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

3. **Big**
When used alone, in an app flow or where checkboxes needs to stand out.  

## States
![](https://i.imgur.com/KtEf49R.jpg)


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 color depending on the type of checkbox. Cursor becomes a pointer.

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

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

4. **Disabled state**
State visible if the checkbox 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 checkbox should be checked and it's not the case. All elements are displayed in another colour in order to signify the error state.



## Anatomy
![](https://i.imgur.com/vJxWEHr.jpg)

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] 
> * **Make the label selectable.** Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
> * **List options vertically.** Vertical listings are easier for the reader to identify which checkbox is related to which label.
> * **Use positive statements.** Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
> * **Use adequate touch targets.** If you customize, make sure selections are adequately spaced for touch screens.


## Related elements
### Checkbox vs. radio button
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 radio buttons](https://)

### Checkbox 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://)