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
1. Selection Indicator
A checkmark icon indicates the selection state.
2. Container
Checkboxes have a rounded square container around the selection indicator.
Behavior
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!
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
1. Selection Indicator
A checkmark icon indicates the selection state.
2. Container
Checkboxes have a rounded square container around the selection indicator.
Behavior
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.