Checkbox - Accessibility

Checkboxes allow users to select one or more options from a number of choices.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

General

Every checkbox must have a clear, programmatically associated label. Labels should be visible text, not hidden, unless there’s a strong reason (checkbox card).

Interactions

Mouse

Click toggles the selected state.

Keyboard

Selection can be toggled using the spacebar when focused.

Other

Works with assistive devices like screens readers, which announce the keyboard label and state.

Design considerations

Labelling

Designers should ensure checkbox labels are clear, short, and easy to understand, with adequate space around each checkbox for easy navigation.

Content considerations

• Each checkbox requires a clear label. Avoid using only icons without explanatory text.
• All checkboxes marked as required with an * must have an accompanying legend. Example: * denotes a required field