Checkboxes give people a way to make a range of selections (zero, one, or multiple). They’re also used to have someone indicate they agree to specific terms.
Figma
The Figma reference for Checkbox will appear here once the design link is added.
Storybook
Interactive examples for Checkbox will render here once the Storybook link is wired in.
Best practices
- Work independently from each other — selecting one checkbox shouldn’t change another (except for a bulk “select all”).
- Be framed positively. For example, say “List lot publicly” instead of “Hide lot”.
- Always have a label when used to activate or deactivate a setting.
- Be listed in a logical order — alphabetical, numerical, time-based, or another clear system.
- Link to more information or include a subtitle when needed. Don’t rely on tooltips to explain a checkbox.
Do’s and don’ts
Do
Start each option with a capital letter and no trailing punctuation: “Red”, “Yellow”, “Blue”.
Don’t
Lowercase options or end them with commas or semicolons: “red;”, “yellow;”.
Do
For agreement, use the first person: “I agree to the Terms of Service.”
Don’t
Phrase agreement in the third person or as an instruction.