When to use
Use when the user can select zero, one, or many independent options.
Loading…
Find components, patterns, tokens, and docs
Documentation
Checkboxes let users opt into independent choices.
Use a group with a legend for related options. Keep labels clickable.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use when the user can select zero, one, or many independent options.
Use a switch for an immediate on/off setting. Use radio for a single exclusive choice.
Makes optional commitments explicit instead of burying them in copy.
The label must be associated. Hit area should include the text, not just the box.
<Checkbox
variant="primary"
size="medium"
>
Send me product updates
</Checkbox>