Form

Checkbox input

Published on

Description

Checkboxes allow users to select one or more options from a list, or toggle a single option on/off. Group related checkboxes inside a <fieldset> with a <legend>.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <fieldset name="checkbox">
    <legend id="checkbox">
      <hgroup>
        <h1>Checkboxes</h1>
      </hgroup>
    </legend> <span id="checkbox-hint">legend hint</span>
    <div><input value="a" id="checkbox-a" name="checkbox" type="checkbox" checked="" aria-describedby="checkbox-a-hint" /> <label for="checkbox-a">Option a</label> </div>
    <div><input value="b" id="checkbox-b" name="checkbox" type="checkbox" aria-describedby="checkbox-b-hint" /> <label for="checkbox-b">Option b</label> </div>
  </fieldset> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-checkbox" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use <fieldset> and <legend> to group related checkboxes. The legend provides context announced by screen readers before each option.
  • Visually hide checkbox inputs using clip/position methods — never display: none. Use ::before/::after pseudo-elements for custom indicators.
  • Support Windows High Contrast Mode, dark mode, prefers-reduced-motion, RTL, and print.
  • Consider accent-color for simple brand customization of native checkboxes.

References

Variables

None for input