Checkbox
BetaBatch B. Turn an option on or off. In a group, choose any number of options.
When to use
Use when people can pick several options, or confirm one option that applies after submitting.
When not to use
For settings that apply right away, use Switch. For one choice from a list, use Radio.
Anatomy
Notify me by
Needed to send notifications.
- Box, 16px
- Check mark, or a dash when mixed
- Label
- Help text and error, lined up with the label
Variants
| Variant | How |
|---|---|
| Single | Checkbox on its own. |
| Group | CheckboxGroup with Checkbox items, each with a value. |
| Mixed | indeterminate. Use for "select all" when only some items are selected. |
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Pressed | Disabled | Read-only | Invalid | |
|---|---|---|---|---|---|---|---|
| unchecked | Required. | ||||||
| checked | Required. | ||||||
| mixed | Required. |