Checkbox
We recommending using a Checkbox over a Switch when you have a long list (>3) of toggles.
Props
Usage guidelines
When to Use
- Presenting users with a list of multiple, related options where users can select all, some, or none of the options. With Checkboxes, users can select more than one option.
- Presenting users with a single option that can be selected or not.
When Not to Use
- Situations where users can only choose one out of multiple, related options. Use RadioButtons instead.
- When a selection takes immediate effect, especially on mobile. Use Switch instead.
Example
Example: Group
Here is an example of an accessible group of checkboxes. When creating a group of Checkboxes, be sure to wrap them in a Fieldset.
Example: With Subtext
Here is an example of a group of checkboxes with additional subtext applied.
Example: With Images
Here is an example of a group of checkboxes with images included. When including images, you can use the subtext property to clearly describe the information being presented by the image, or use the image's alt text to provide more context.
Example: Error state
Here is an example of a checkbox showing an error message.
This checkbox has an error
Example: ref
The innermost Checkbox
element can be accessed via ref