Checkbox

Allow users to select zero, one, or many options from a list of choices

Overview #

Use the checkbox component to allow users to pick zero, one, or many options from a list of choices.

Examples #

Choose an example

<fieldset class="rvt-fieldset">
  <legend class="rvt-sr-only">Checkbox list</legend>
  <ul class="rvt-list-plain rvt-width-xl">
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-1">
        <label for="checkbox-1">Option one</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-2" disabled>
        <label for="checkbox-2">Option two</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-3" disabled checked>
        <label for="checkbox-3">Option three</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input aria-describedby="checkbox-description" type="checkbox" name="checkbox-demo" id="checkbox-long">
        <label for="checkbox-long">Just a quick note</label>
        <div id="checkbox-description" class="rvt-checkbox__description">This checkbox has a really long label that can wrap on to two lines and still have nice left alignment.</div>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox rvt-checkbox--sr-only-label">
        <input type="checkbox" name="checkbox-demo" id="checkbox-hidden-label">
        <label for="checkbox-hidden-label">This label text is visually hidden</label>
      </div>
    </li>
  </ul>
</fieldset>

Open in new window Copy link to example

<fieldset class="rvt-fieldset">
  <legend>Checkbox list <span class="rvt-color-orange-500 rvt-text-bold">*</span></legend>
  <ul class="rvt-list-plain rvt-width-xl">
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-1">
        <label for="checkbox-1">Option one</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-2" disabled>
        <label for="checkbox-2">Option two</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-3" disabled checked>
        <label for="checkbox-3">Option three</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input aria-describedby="checkbox-description" type="checkbox" name="checkbox-demo" id="checkbox-long">
        <label for="checkbox-long">Just a quick note</label>
        <div id="checkbox-description" class="rvt-checkbox__description">This checkbox has a really long label that can wrap on to two lines and still have nice left alignment.</div>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox rvt-checkbox--sr-only-label">
        <input type="checkbox" name="checkbox-demo" id="checkbox-hidden-label">
        <label for="checkbox-hidden-label">This label text is visually hidden</label>
      </div>
    </li>
  </ul>
</fieldset>

Open in new window Copy link to example

<fieldset class="rvt-fieldset">
  <legend class="rvt-sr-only">Checkbox list</legend>
  <ul class="rvt-list-inline">
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-1" checked>
        <label for="checkbox-1">Option one</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-2">
        <label for="checkbox-2">Option two</label>
      </div>
    </li>
    <li>
      <div class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-3">
        <label for="checkbox-3">Option three</label>
      </div>
    </li>
  </ul>
</fieldset>

Usage #

Do

Use to present options that can be toggled on or off
Keep each checkbox label brief and of a similar length
Write labels using positive phrasing that describes what the user is opting into by checking the box
Write labels using sentence-style capitalization without punctuation

Don't

Use to present a list of mutually exclusive options—use a list of radio buttons or a select input instead
Phrase a label so that selecting a checkbox means not to perform an action (Exception: "Don't show this again" checkboxes)

Accessibility #

Include a note about required fields. If you use required checkboxes in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.