Checkbox
Checkbox for multi-select and confirmations. Always has a label; the label can be visually hidden.
Master
Toggle size, checked, indeterminate, error, disabled and hidden label. The checkbox itself is clickable too.
Usage
Use Checkbox for independent yes/no choices and multi-select, like agreeing to terms or picking table rows. For one choice from several, use radio buttons. Every Checkbox has a label; set hideLabel in table rows and other slots with no visible text. Indeterminate is only for a parent that reflects mixed children. See contracts/checkbox.json for the full contract.
Do's
- Independent yes/no choices, like enable notifications.
- Multi-select in lists and table rows.
- Confirmations that are not a submit action.
Don'ts
- Do not invent a local Checkbox.
- Do not use for one choice from several.
- Do not use as a submit action. Use Button.
- Do not ship a Checkbox without a label. Use hideLabel instead.
- Do not use raw hex.
<Checkbox size="md" label="Send me product updates" />