Version 3.0.6

Checkboxes & Radios

Checkboxes and radio buttons allow users to see all available options from a visible list.

Checkboxes allow users to select one or more options from a visible list.

                      
<ul class="checkbox-list">
<li class="checkbox-unit">
<input id="checkbox-1" class="checkbox" type="checkbox">
<label for="checkbox-1" class="checkbox-label">Item 1</label>
</li>
<li class="checkbox-unit">
<input id="checkbox-2" class="checkbox" type="checkbox" checked>
<label for="checkbox-2" class="checkbox-label">Item 2</label>
</li>
<li class="checkbox-unit">
<input id="checkbox-3" class="checkbox" type="checkbox" disabled>
<label for="checkbox-3" class="checkbox-label">Disabled</label>
</li>
<li class="checkbox-unit">
<input id="checkbox-4" class="checkbox" type="checkbox" disabled checked>
<label for="checkbox-4" class="checkbox-label">Disabled Selected</label>
</li>
</ul>

Accessibility

  • If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
  • Disabled checkboxes and radios are supported, but to provide a “not-allowed” cursor on hover of the parent <label>, you’ll need to add the <code>.disabled</code> class to the parent <code>.checkbox</code>, <code>.checkbox-inline</code>, <code>.radio</code>, or <code>.radio-inline</code>.
  • Surround a related set of checkboxes with a <fieldset>. The <legend> provides context for the grouping. Do not use fieldset and legend for a single check.
  • The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.
  • Each input should have a semantic id attribute, and its corresponding label should have the same value in it’s for attribute.
  • The title attribute can replace <label>.

Usability

When to use

  • When a user can select any number of choices from a set list.
  • When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
  • When users need to see all the available options at a glance.

When to consider something different

  • If there are too many options to display on a mobile screen.
  • If a user can only select one option from a list (use radio buttons instead).

Guidelines

  • Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
  • List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which checkbox.
  • Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
  • If you customize, make sure selections are adequately spaced for touch screens.

Radio buttons allow users to see all available choices at once and select exactly one option.

                      
<ul class="radio-list">
<li class="radio-unit">
<input id="radio-1" name="radio-example" class="radio" type="radio" />
<label for="radio-1" class="radio-label">Option 1</label>
</li>
<li class="radio-unit">
<input id="radio-2" name="radio-example" class="radio" type="radio" checked />
<label for="radio-2" class="radio-label">Option 2</label>
</li>
<li class="radio-unit">
<input id="radio-3" name="radio-example2" class="radio" type="radio" disabled />
<label for="radio-3" class="radio-label">Disabled</label>
</li>
<li class="radio-unit">
<input id="radio-4" name="radio-example2" class="radio" type="radio" disabled checked />
<label for="radio-4" class="radio-label">Disabled Selected</label>
</li>
</ul>

Accessibility

  • Group related radio buttons together with
  • Each radio button should have a
  • The title attribute can replace

Usability

When to use

  • When users need to select only one option out of a set of mutually exclusive choices.
  • When the number of available options can fit onto a mobile screen.

When to consider something else

  • Consider checkboxes if users need to select more than one option or if there is only one item to select.
  • Consider a dropdown if you don’t have enough space to list out all available options.
  • If users should be able to select zero of the options.

Guidance

    Users should be able to tap on or click on either the text "label" or the radio button to select or deselect an option.
  • Options that are listed vertically are easier to read than those that are listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which radio button.
  • If you customize, make sure selections are adequately spaced for touch screens.
  • Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. If you are unsure, leave nothing selected by default.

Search Results

Powered by