Checkboxes

Checkboxes allow users to select multiple options from a list of choices. Use them when users need to make one or more selections from a group of related options. The component supports proper form validation, accessibility features, and integrates with fieldset legends for clear grouping and labeling.

Do

  • Group related checkboxes within a fieldset with a descriptive legend that explains the purpose.
  • Use clear, specific labels that describe exactly what each option means or does.
  • Provide logical ordering of options, such as alphabetical, frequency of use, or importance.
  • Include validation messages that clearly explain what users need to do to fix errors.
  • Use consistent spacing between checkbox options for easy scanning and selection.
  • Consider "Select All" options for long lists where users might want to choose everything.
  • Test with assistive technology to ensure proper screen reader announcements.
  • Use parallel language structure across all options in a group for consistency.

Don't

  • Don't use checkboxes for single selections — use radio buttons when only one choice is allowed.
  • Don't create overly long lists — consider grouping or using alternative input methods for extensive options.
  • Don't use ambiguous labels like “Yes” or “Option 1” without clear context.
  • Don't forget required field indicators when selections are mandatory.
  • Don't mix different types of choices in the same checkbox group — keep options logically related.
  • Don't make labels too long — keep them concise while remaining descriptive.
  • Don't forget to associate labels properly with their corresponding checkbox inputs.
  • Don't use checkboxes for actions — use buttons for triggering immediate actions.

Example

Required checkbox group for notification preferences. Demonstrates a complete checkbox implementation with fieldset grouping, descriptive legend, and four communication preference options. Shows proper form structure with validation requirements, unique IDs, and accessible labeling. Each option represents a realistic choice users might encounter when setting up notification preferences for government services.

Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Fieldset and legend structure: Uses <fieldset> and <legend> elements to group related checkboxes and provide context.
  • Proper label association: Each checkbox has a correctly associated label using the for attribute and matching id.
  • Clear option descriptions: Labels provide specific, descriptive text that explains each choice clearly.
  • Required field indication: Required checkboxes are properly marked and announced to screen readers.

Keyboard Navigation

  • Full keyboard access: All checkboxes are accessible via Tab key navigation and activated with Space key.
  • Logical tab order: Checkboxes follow the visual order and logical grouping within the fieldset.
  • Focus indicators: Clear visual focus states help keyboard users identify their current position.
  • Group navigation: Users can navigate through the entire checkbox group efficiently.

Visual Accessibility

  • High contrast styling: Checkbox states (checked, unchecked, focused) meet WCAG contrast requirements.
  • Adequate spacing: Sufficient space between options prevents accidental selections on touch devices.
  • Clear visual hierarchy: Fieldset legend and individual labels create a logical visual structure.
  • Consistent styling: All checkboxes in the group use the same visual treatment and spacing.

Content Guidelines

  • Descriptive group labels: Fieldset legend clearly explains the purpose of the checkbox group.
  • Specific option text: Each checkbox label describes exactly what the user is agreeing to or selecting.
  • Parallel structure: All options follow similar language patterns for consistency and clarity.
  • Actionable language: Labels use clear, direct language that users can easily understand.

Implementation Considerations

  • Form validation: Proper validation attributes and error messaging for required selections.
  • Unique identifiers: Each checkbox has a unique ID to ensure proper label association.
  • Name attributes: Consistent naming allows proper form submission and grouping.
  • Progressive enhancement: Component works without JavaScript for basic functionality.

ARIA Attributes in Use

  • for and id attributes create proper label-input associations.
  • required attribute indicates mandatory selections.
  • <fieldset> and <legend> elements provide semantic grouping.
  • data-msg-required provides custom validation messaging.
  • Native HTML semantics provide built-in accessibility without additional ARIA.
Mis à jour: 02 décembre 2025