Live Demo
Anatomy
- Checkbox
- Label
- Check box Group
Checkboxes can stand alone, be grouped, or nested.
Layout and spacing
The checkbox component layout and spacing ensure consistent and balanced arrangement within the design system.
- checkbox and label : 12px
Sizes
The checkbox can be integrated in two sizes, small and medium.
Variations
- Checkbox components exhibit several interaction states: enabled, hovered, and disabled
- The feature selection states: checked, unchecked, and indeterminate.
- Default configurations determine how checkboxes appear: checked, unchecked, or disabled. Notably, checkboxes must enable actions that users can undo by simply unchecking the box, ensuring reversible choices. For instance, checkboxes are suitable for filters but unsuitable for deletions. To incorporate actions, consider utilizing Button Status.
Guidelines
- Ensure a label is consistently provided.
- Employ sentence case for label text.
- Refrain from using punctuation in labels or after checkbox entries.
- Opt for concise labels to facilitate swift and confident checking.
- Frame labels as affirmations in the checked state and negations in the unchecked state.
- Title a checkbox collection when its content isn't instantly clear.
- Enable both checkbox and label for selection.
Label and checkbox should be top aligned
Do not center align or bottom align label and checkbox
Checkboxes should phrased in a clearer, positive way
Using negative phrasing in checkboxes can be confusing; in the example, the ambiguous phrasing doesn’t indicate whether the action performed by the user is positive or not.
Labels should be brief
Do not use lengthy labels.