Checkbox
Checkbox is a form control for single and multiple selections.
On this page
On this page
Usage
Use checkboxes to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
States
Checkboxes have static dimensions and three different states: rest (default), focus, and disabled.
Selected states
Checkboxes are capable of showing two forms of selection: checked (left) or indeterminate (right).
The indeterminate state is colored in some browsers (e.g. Safari) and grey in others (e.g. Chrome).
Best practices
- An individual checkbox should not have its own validation message or style. Instead, show a validation message on the checkbox group. For more information, see the Validation Message section in the Forms documentation.
- While there are certain use cases where an individual checkbox may be required, the most common use case is to require a selection from a checkbox group. In this case, an individual checkbox button should not be marked as required, but the checkbox group should be marked as required instead. For more information, see the Required field indicator in the Forms documentation.