Checkbox

selection

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Properties

Name Type Required Default Description
checked boolean - - Whether or not the checkbox is selected
indeterminate boolean - - Whether or not the checkbox is in an indeterminate state
disabled boolean - - Whether the checkbox is disabled
required boolean - - Whether the checkbox must be selected for form submission
value string - on The value submitted with the form when checked
name string - - The HTML name for form submission

States

unchecked

Default unselected state

checked

Selected state

indeterminate

Partially selected state for parent checkboxes

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: checkbox
Keyboard Support:
  • Space - Toggle the checkbox state
  • Tab - Move focus to the checkbox
Screen Reader Notes: Announce checkbox label, checked state, and indeterminate state. Always provide aria-label for checkboxes without visible labels.

LLM Context

Intent: Allow users to make binary or multiple selections from a list
Anti-Patterns:
  • Checkbox without visible or accessible label
  • Using checkbox for mutually exclusive options
  • Checkbox for simple on/off toggle (use switch)
  • Not using indeterminate state for parent checkboxes
Example Usage: 
<md-checkbox></md-checkbox>
<md-checkbox checked></md-checkbox>
<md-checkbox indeterminate></md-checkbox>
<label><md-checkbox></md-checkbox>Accept terms</label>