Checkbox
Checkboxes lets the user pick one or more options within a set of options. It is also used to enable and disable an option.
Variations
The checkbox can be displayed in the different main states.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db04e884b1c3976aa2cdd_01%20Unchecked.png)
The unchecked checkbox is an empty box.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db05186d4c0ca7b1662a8_06%20Checked%20Copy%202.png)
A mixed state is used if it is a checkbox option that controls multiple child options, but the child options are in different states.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db052c33e99cd550f9d65_06%20Checked.png)
The checked checkbox is filled and displays a checkmark.
Specs
How the component are built up and styled in both unchecked and checked state.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db2508f129ffa16e93e32_Checkbox_Specs.png)
Anatomy
The checkbox is built up by a container and an icon displayed in a checked state.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db1dc86d4c04ea5166fcd_Checkbox_Anatomy.png)
Colors
The track switches style when it is on.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db8987b0ad7d563ae86d9_Checkbox_Colors.png)
Measures and spacing
The measurements are the same in both enabled and on states, but in the on state it is flipped horizontally.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db1ddc33e992da70fb536_Checkbox_MeasuresAndSpacing.png)
States
The look of the states are defined by the style.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db04e884b1c3976aa2cdd_01%20Unchecked.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db04f884b1c6907aa2cde_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db04f8f129f60a2e9287d_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db04fc33e9908cd0f9ce8_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db30e86d4c04eb31674e8_05%20Disabled.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8db052c33e99cd550f9d65_06%20Checked.png)