COMPONENTS
Checkbox
Checkboxes allow multiple selections from a set of options.
Checkboxes can be used alone, grouped, or nested.
- Checkbox
- Label
Checkboxes can be grouped in horizontal or vertical orientations for users to pick from a set of related options.
Label can be placed to the right or the left of the checkbox.
Note:Â Left label is not yet supported in GS UI Toolkit.
Checkboxes may be nested to show a hierarchy of selections. Checking a parent will automatically activate and check all children. Unchecking a parent checkbox will deactivate and uncheck all children. If a group contains a mix of checked and unchecked children, the parent will show an indeterminate state. Use the Tree component if you would like collapsable and expandable nested checkboxes.
Checkbox interaction states are enabled, hovered, focused, disabled, and error. Checkbox selection states are checked, unchecked and indeterminate. Checkboxes can be configured to display checked, unchecked, or disabled by default. When using checkboxes, there should be no action that the user cannot undo by checking the box again. For example, it's okay to use checkboxes for filtering but not for deletion. Use Button Status if you need to include an action.
Checkboxes can be displayed in large, medium and small sizes.
- Always provide a label.
- Write labels in sentence case.
- Do not use punctuation in labels or after checkbox fields.
- Keep labels short so users can check quickly and confidently.
- Write labels as statements that the checked state makes true and the unchecked state makes false.
- Title a checkbox group if the content of a group of checkboxes is not immediately apparent.
- Both the checkbox and label should trigger selection.
- See the form component for spacing guidance when grouping.
Contents