Agriculture Design System
Design System for import and export services

Checkbox

Checkboxes allow users to select one or more options from a list.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/checkbox';

Learn more about how to meet WCAG success criteria when implementing checkboxes. This makes them accessible and inclusive for users of all abilities and situations.

The checkbox component passed accessibility testing in 2022 and 2024.

Clear and descriptive labels

Requirements

  • Labels clearly identify the purpose of the checkbox.
  • The purpose of the checkbox is understood and conveyed by assistive technology.
  • Wrap groups of checkboxes in a fieldset with a legend that describes the purpose of the set.

Benefits

  • Improves understanding of available options.
  • Helps all users avoid submitting an incomplete or incorrect form.
  • Makes filling in forms easier for people with cognitive and learning disabilities.
  • Assistive technology users have equal access to information about the purpose of the component.
  • Clear labelling supports users with English as a second language.

WCAG references

Name, role, value

Requirements

  • All checkboxes have appropriate names, roles and values that are understood and conveyed by assistive technology.
  • Clear label identifying the checkbox.
  • ARIA roles and states where needed (e.g., aria-checked, aria-required).
  • All checkboxes in a fieldset should have the same name – for example:
name="device" value="mobile"
name="device" value="tablet"
name="device" value="desktop"

Benefits

  • Assistive technology users have equal access to information about the state of the component.
  • Improves usability for voice control software users.
  • Helps users with cognitive challenges understand component functionality.
  • Makes automation and testing more reliable.

WCAG references