UI components

Form controls

Form controls allow users to enter information into a page.

Checkboxes

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

Historical figures 1 



  <fieldset class="oit-fieldset-inputs oit-sans">

    <legend class="oit-sr-only">Historical figures 1</legend>

    <ul class="oit-unstyled-list">
      <li>
        <input id="truth" type="checkbox" name="historical-figures-1" value="truth" checked>
        <label for="truth">Sojourner Truth</label>
      </li>
      <li>
        <input id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
        <label for="douglass">Frederick Douglass</label>
      </li>
      <li>
        <input id="washington" type="checkbox" name="historical-figures-1" value="washington">
        <label for="washington">Booker T. Washington</label>
      </li>
      <li>
        <input id="carver" type="checkbox" name="historical-figures-1" disabled>
        <label for="carver">George Washington Carver</label>
      </li>
    </ul>

  </fieldset>

Accessibility

If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.

  • 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

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

Historical figures 2 



  <fieldset class="oit-fieldset-inputs oit-sans">

    <legend class="oit-sr-only">Historical figures 2</legend>

    <ul class="oit-unstyled-list">
      <li>
        <input id="stanton" type="radio" checked name="historical-figures-2" value="stanton">
        <label for="stanton">Elizabeth Cady Stanton</label>
      </li>
      <li>
        <input id="anthony" type="radio" name="historical-figures-2" value="anthony">
        <label for="anthony">Susan B. Anthony</label>
      </li>
      <li>
        <input id="tubman" type="radio" name="historical-figures-2" value="tubman">
        <label for="tubman">Harriet Tubman</label>
      </li>
    </ul>

  </fieldset>

Accessibility

If you customize the radio buttons, ensure they continue to meet the the accessibility requirements that apply to all form controls.

  • Group related radio buttons together with <fieldset> and describe the group with <legend>.
  • Each radio button should have a <label>. Associate the two by matching the <label>’s for attribute to the <input>’s id attribute.
  • The title attribute can replace <label>.

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.