Selectors (Checkbox)
A checkbox allows users to make their selection from one or more options.
Variants
/Checkbox%20Variants.png)
| Variant | Usage |
|---|---|
|
Unselected |
Use this as the default state of a checkbox. |
|
Selected |
Use this to indicate that a selection has been made. |
|
Disabled |
Use this when the selection is not applicable. |
|
Selected-Disabled |
Use this when a selection has already been made by default |
Anatomy
Checkboxes are made up of the following:
- Fill Container
- Input
/Checkbox%20Anatomy.png)
Size
Checkboxes are 18px by 18px nested in a frame that is 24px by 24px.
/Checkbox%20Size.png)
Text Style
Text that accompany a checkbox as a label has a text size of 16px in Primary Grey. Use “Body (Default) text style on Figma.
/Checkbox%20Text.png)
Dos and Don'ts
/Checkbox%20Do.png)
Keep labels and controls aligned, and on the right. Use checkboxes for multiple choices.
/Checkbox%20Dont.png)
Align control to the right of the label, as the inconsistent distance between the labels and controls will render the component hard to read. Do not use checkboxes when only one item can be selected.