Checkbox
UICheckbox
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d0822dec9af1550e4b66091_image_preview-8.png)
Styles
Using this Component
Checkboxes should be used when a user can select multiple elements of a list.
Compatibility
Checkboxes may be used within other components such as UIMenu or UIPlatformTable, or as a standalone setting.
Labels
All checkboxes should have an adjacent label. A label may be omitted only when the selection is contextually apparent, such as selecting a row within UIPlatformTable.
Alternatives
For instances where only one element of a list may be selected at once, use UIRadio. For instances of enabling/disabling a single item, use UISwitch.
Structure
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d6ec2ba37900b03fe2a3db4_Checkbox%20-%202%402x.png)
1. Selection Indicator
A checkmark icon indicates the selection state.
2. Container
Checkboxes have a rounded square container around the selection indicator.
Behavior
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d6ec2be675f2cd739615463_Checkbox%20-%203%402x.png)
Checkboxes are directly interactive elements. Depending on the context they may be disabled to prevent interactivity.
The default state for all checkboxes is unchecked, unless due to a specific feature, or saved state.
Clickable Area
Clicking anywhere on the checkbox, as well as anywhere on its label (when possible) should toggle the checkbox.
Playground Coming Soon!
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d0822dec9af1550e4b66091_image_preview-8.png)
Styles
Using this Component
Checkboxes should be used when a user can select multiple elements of a list.
Compatibility
Checkboxes may be used within other components such as UIMenu or UIPlatformTable, or as a standalone setting.
Labels
All checkboxes should have an adjacent label. A label may be omitted only when the selection is contextually apparent, such as selecting a row within UIPlatformTable.
Alternatives
For instances where only one element of a list may be selected at once, use UIRadio. For instances of enabling/disabling a single item, use UISwitch.
Structure
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d6ec2ba37900b03fe2a3db4_Checkbox%20-%202%402x.png)
1. Selection Indicator
A checkmark icon indicates the selection state.
2. Container
Checkboxes have a rounded square container around the selection indicator.
Behavior
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/5d6ec2be675f2cd739615463_Checkbox%20-%203%402x.png)
Checkboxes are directly interactive elements. Depending on the context they may be disabled to prevent interactivity.
The default state for all checkboxes is unchecked, unless due to a specific feature, or saved state.
Clickable Area
Clicking anywhere on the checkbox, as well as anywhere on its label (when possible) should toggle the checkbox.