Skip to main content
Rivet Design System Indiana University

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 #


Open in new window
Copy link to 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>

Elements #

Element Description Usage Required Multiple
Label Text that appears next to the checkbox Limit to a few words. Keep all labels in a group of checkboxes to a similar length. Write labels using sentence-style capitalization without punctuation. Use positive phrasing that describes what the user is opting into by checking the box.

Label is required

Component may contain only one Label

Usage #

Do

  • Use to present options that can be toggled on or off

Don't

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.