FEC Pattern Library

Checkbox: standalone

Standalone checkboxes allow users to select one setting from a visible list.

When to use

  • When a user needs to choose “yes” or “no” on only one option. For example, to toggle a setting on or off.

When to consider something else

  • If a user can only select one option from a list (use radio buttons instead).

Resources

Learn more about accessibility and best practices for checkboxes from the U.S. Web Design System.

<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
    <div class="filter">
        <fieldset class="js-filter" data-filter="checkbox">
            <legend class="label">
                Restrict contributions
                <div class="tooltip__container">
                    <button class="tooltip__trigger" type="button" tabindex="0"><span class="u-visually-hidden">Learn more</span></button>
                    <div id="unique-tooltip" role="tooltip" class="tooltip tooltip--under tooltip--left">
                        <p class="tooltip__content">Some transactions — such as earmarked contributions and partnership contributions — are reported more than once for clarity on the printed page but can lead to confusion when viewed as data online. Use the unique only filter to remove these extra transactions.</p>
                    </div>
                </div>
            </legend>
            <ul>
                <li>
                    <input id="is-individual" name="is_individual" type="checkbox" value="true" class="tooltip-trigger" aria-describedby="unique-tooltip" tabindex="0">
                    <label for="is-individual" class="t-inline-block">
                        From unique individuals only
                    </label>
                </li>
            </ul>
        </fieldset>
    </div>
</div>
 
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
  <div class="filter">
    <fieldset class="js-filter" data-filter="checkbox">
      <legend class="label">
        Restrict contributions
        <div class="tooltip__container">
          <button class="tooltip__trigger" type="button" tabindex="0"><span class="u-visually-hidden">Learn more</span></button>
          <div id="unique-tooltip" role="tooltip" class="tooltip tooltip--under tooltip--left">
            <p class="tooltip__content">Some transactions — such as earmarked contributions and partnership contributions — are reported more than once for clarity on the printed page but can lead to confusion when viewed as data online. Use the unique only filter to remove these extra transactions.</p>
          </div>
        </div>
      </legend>
      <ul>
        <li>
          <input id="is-individual" name="is_individual" type="checkbox" value="true" class="tooltip-trigger" aria-describedby="unique-tooltip" tabindex="0">
          <label for="is-individual" class="t-inline-block">
            From unique individuals only
          </label>
        </li>
      </ul>
    </fieldset>
  </div>
</div>
 
/* No context defined. */
  • Handle: @standalone
  • Preview:
  • Filesystem Path: components/02-components/filters/01-checkboxes/02-standalone/standalone.html