Checkboxes
A checkbox allows a user to select one or more items from a set of options. It may also be used to agree to a statement.
Default Checkbox Example
When to Use
- Use when the user may select one or more items from a predetermined list of options.
- Use when the options are relatively simple/short in length.
Variations
- Default Example (shown above)
- Default with Error Example
When Not to Use
- Do not use checkboxes for a single on/off selection. Consider using a switch instead.
Variations
Default with Error
Developer Notes
Order Matters: The <input>
element must be the first item inside of the checkbox container. Otherwise the disabled
state will not work properly.