UCLA Design System

Checkbox

Checkboxes are an easily understandable way to indicate that users can select one or more answers to a question or items from a list. They’re always followed by a label or instructions that clearly indicate what checking the box represents.

Each checkbox has two different states: selected or unselected, which are similar to an on and off switch. If a checkbox label says “Yes, send me an email,” it’s clear what checking that box (or not checking it) will accomplish.

Checkboxes also visibly show users what’s been selected and makes it easy for them to “uncheck” an option, which can be difficult with other selection methods on a form (such as radio buttons or select menus). It’s common to include “check all that apply” instructions with checkboxes to let users know it’s okay to select more than one option at a time.

When to use

To display multiple answers. When a user can select any number of choices from a list.

To allow users to toggle answers. When a user needs to acknowledge acceptance of something (like terms of service) or switch between two opposite states, such as unchecked = “no” and checked = “yes”.

Anatomy

Checkbox Anatomy

1. Checkbox (required)

2. Label (required)

Best Practices

Make the label selectable. Users should be able to select either the text label or the checkbox to select or deselect an option.

List options vertically. Horizontal listings can make it difficult to tell which label pertains to which checkbox.

Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive a promotional email.”

Use logical labels. Make sure that the label makes both states — checked and unchecked — clear to the user. If that’s not possible, consider using a radio button with two individual options instead. Then both states can have their own clearly marked label.

Use adequate touch targets. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.

Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.

Use a logical order. Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.

Examples


<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (default)</legend>
    <div class="ucla-field">
      <div class="ucla-field__control">
        <label class="ucla-field__checkbox-label" for="exampleCheckbox">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckbox"/>
          Remember Me
        </label>
      </div>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (default horizontal)</legend>
    <div class="ucla-field">
      <div class="ucla-field__control">
        <label class="ucla-field__checkbox-label" for="exampleCheckboxInline1">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxInline1"/>
          Checkbox 1
        </label>
        <label class="ucla-field__checkbox-label" for="exampleCheckboxInline2">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxInline2"/>
          Checkbox 2
        </label>
      </div>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (default vertical)</legend>
    <div class="ucla-field">
      <div class="ucla-field__control ucla-field__checkbox-vertical">
        <label class="ucla-field__checkbox-label" for="exampleCheckboxList1">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxList1"/>
          Checkbox 1
        </label>
        <label class="ucla-field__checkbox-label" for="exampleCheckboxList2">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxList2"/>
          Checkbox 2
        </label>
      </div>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (warning)</legend>
    <div class="ucla-field ucla-is-warning" aria-describedby="uclaCheckboxWarning">
      <div class="ucla-field__control">
        <label class="ucla-field__checkbox-label" for="exampleCheckboxWarning">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxWarning"/>
          Remember Me
        </label>
      </div>
      <p class="ucla-field__help ucla-field__radio-checkbox-help-has-icon" id="uclaCheckboxWarning">You must choose a selection</p>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (error)</legend>
    <div class="ucla-field ucla-is-error" aria-describedby="uclaCheckboxError">
      <div class="ucla-field__control">
        <label class="ucla-field__checkbox-label" for="exampleCheckboxError">
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxError"/>
          Remember Me
        </label>
      </div>
      <p class="ucla-field__help ucla-field__radio-checkbox-help-has-icon" id="uclaCheckboxError">You must choose a selection</p>
    </div>
</fieldset>

<fieldset class="ucla-fieldset">
    <legend class="ucla-fieldset__legend">Checkbox (disabled)</legend>
    <div class="ucla-field">
      <div class="ucla-field__control">
        <label class="ucla-field__checkbox-label" for="exampleCheckboxDisabled" disabled>
          <input type="checkbox" class="ucla-field__checkbox" id="exampleCheckboxDisabled" disabled/>
          Remember Me
        </label>
      </div>
    </div> 
</fieldset>