Flint Components
Checkbox
Checkboxes let people pick any number of options from a list, or turn one option on before they submit.
Example
Light
Dark
When to use
- Use checkboxes when people can pick several options, or none.
- Use radio buttons when exactly one option must be picked.
- Use a toggle when the change takes effect right away, with no submit.
Variants and states
| Variant or state | Use |
|---|---|
| Unchecked | The option is off. |
| Checked | The option is on. The fill and the mark both change, so the state is not color alone. |
| Disabled | The option can't be changed right now. Say why nearby. |
Guidance
Make the whole label clickable, not just the box.
Leave a 16px box as the only target.
Group related checkboxes under a fieldset with a legend that asks the question.
Float a list of checkboxes with no group label.
Write labels as positive statements: "Bring the awning lights".
Use negatives like "Don't skip the lights", which make the checked state confusing.