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.
- An individual checkbox button cannot be marked as required. Instead, make a selection required using the checkbox group. For more information, see the Required field indicator in the Forms documentation.