Checkbox
A checkbox is a component used in forms and settings that lets users select one or more options.
Anatomy
Checkbox anatomy.
Checkbox Input: The clickable area where the checkmark appears. A checkbox input indicating the appropriate state. By default it is unselected.
Checkbox Label: Describes the information you want to select or unselect. Descriptive text adjacent to the checkbox input, indicating what the checkbox controls.
Checkmark: The symbol (usually a tick) that appears when the checkbox input is selected.
Hint: Optional text providing additional information about the checkbox's purpose or usage.
Sizes
Based on the needs of your design system, you might create different sizes for your checkboxes. However, in most cases, one size is usually enough.
Checkbox sizes.
States
Unchecked
The default state.
Unchecked.
Example.
Checked
Indicates selection.
Checked.
Example.
Indeterminate
Shows a mixed state, often used for parent checkboxes.
Indeterminate.
Example.
States communicate the status of a checkbox to the user.
Enabled: An enabled state communicates an interactive component.
Hover: A hover state communicates when a user has placed a cursor above an interactive element.
Focus: A focus state indicates when a user has selected or highlighted an element using an input method such as a keyboard or voice.
Disabled: A disabled state communicates a noninteractive component.
