Checkboxes allow users to select one or more choices from several options.

Core Components & Variants

Untitled

Checkbox

Core
Property Name Property Type Property Value
Status Variant Enabled
Error
Disabled
Skeleton
Status Variant Default
Hover
Focus
Pressed
Is Active Variant False
True
Is Indeterminate Variant False
True

Variant: States

Untitled

Kit Components

Untitled

Kit Components (Auto Layout)
Use Label
Skeleton
Use Label Group Horizontal Title
Use Label Group Horizontal Title + Caption
Checkbox Group Vertical Title
Checkbox Group Vertical Title + Caption

Best Practices

  1. If you need to select multiple options from a list, use checkboxes instead of toggles or radio buttons.
  2. Make sure the labels are easy to read and understand.
  3. Highlight the selected items more prominently than the unselected items.