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" id="checkbox" tabindex="-1" aria-describedby="checkbox-hint">
    <legend>
      <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> <span id="checkbox-a-hint">label hint</span> </div>
    <div><input value="b" id="checkbox-b" name="checkbox" type="checkbox" aria-describedby="checkbox-b-hint" /> <label for="checkbox-b">Option b</label> <span id="checkbox-b-hint">label hint</span> </div>
  </fieldset> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-checkbox" target="_top">View our guidance</a></p>
</form>

Related options can be organized into groups using nested <fieldset> elements that share the same name.

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <fieldset name="checkbox-group" id="checkbox-group" tabindex="-1" aria-describedby="checkbox-group-hint">
    <legend>
      <hgroup>
        <h1>Checkboxes with groups</h1>
      </hgroup>
    </legend> <span id="checkbox-group-hint">legend hint</span>
    <fieldset name="checkbox-group" id="checkbox-group-one" tabindex="-1">
      <legend>Group one</legend>
      <div><input value="a" id="checkbox-group-a" name="checkbox-group" type="checkbox" checked="" aria-describedby="checkbox-group-a-hint" /> <label for="checkbox-group-a">Option a</label> <span id="checkbox-group-a-hint">label hint</span> </div>
      <div><input value="b" id="checkbox-group-b" name="checkbox-group" type="checkbox" aria-describedby="checkbox-group-b-hint" /> <label for="checkbox-group-b">Option b</label> <span id="checkbox-group-b-hint">label hint</span> </div>
    </fieldset>
    <fieldset name="checkbox-group" id="checkbox-group-two" tabindex="-1">
      <legend>Group two</legend>
      <div><input value="c" id="checkbox-group-c" name="checkbox-group" type="checkbox" aria-describedby="checkbox-group-c-hint" /> <label for="checkbox-group-c">Option c</label> <span id="checkbox-group-c-hint">label hint</span> </div>
      <div><input value="d" id="checkbox-group-d" name="checkbox-group" type="checkbox" aria-describedby="checkbox-group-d-hint" /> <label for="checkbox-group-d">Option d</label> <span id="checkbox-group-d-hint">label hint</span> </div>
    </fieldset>
  </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