---
# System prepended metadata

title: Checkbox

---

## Overview
*Allows user to select one or more options from a number of choices.*
### 1. Anatomy
![image](https://hackmd.io/_uploads/SJZag9VEa.png)
1 Title (Optional)
2 Checkbox input
3 Checkbox label
### 2. States
(https://hackmd.io/_uploads/ryMCl9EV6.png)
* Inactive: By default, (a set of) checkboxes have no option selected
* Active: when user interacts and selects the option
* View only: is a state transforms a component’s purpose to be purely informative
* Indeterminate: state when the checkbox contains a sublist of selections
	* When the parent checkbox is checked, all child checkboxes are checked
	* If it is unchecked, all child checkboxes are unchecked
	* If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox
* Error when:
	* A set of selections needs to be chosen in order to move forward
	* Or that a selection that was made is invalid.
* Disabled when: 
	* Indicating that an option is not currently available, though may be available later
	* Another action has to be completed before the checkbox is usable
### 3. Variants
![image](https://hackmd.io/_uploads/r1vlZc446.png)

## 4. Alignment
![image](https://hackmd.io/_uploads/BJLb-9NV6.png)

## Content
**Title** 
* In most cases, the title provides further context or describes what actions to take below.
* In some cases, a group of checkboxes may be within a larger group of components that already have a group title. In this case, the title is not needed.
**Checkbox labels**
* Should use clear and concise labels for checkboxes.
* In most cases, labels appear to the right of checkbox inputs.
* When using a line break, the checkbox is horizontally aligned with the first line of the label
![image](https://hackmd.io/_uploads/rkdGZ9VNT.png)


# Usage Guidelines
**When to use**
* Can be used in forms on a full page, in modals, or on side panels (to filter data either on a page, or in a menu), or within a component
* Turning the checkbox input Active or Inactive can indicate whether user agrees to the terms of service.
**When not to use**
* If user can only select one option from a list - use radio buttons 
![image](https://hackmd.io/_uploads/S1AVZ9ENp.png)

* If user has to input options from a long list of items - use dropdown input
![image](https://hackmd.io/_uploads/r1EI-c4Ep.png)

# Code (FE inputs)