Switch

Toggle the state between two opposing states or options.

Preview

The Switch component acts as a way to allow the User to toggle between two mutually exclusive options. A Switch behaves similarly to a Checkbox component, but the affect on the system should occur immediately. One aspect of the Switch component that provides an additional state is the Inderterminate variant, which allows for an initial “unselected” state.

Variants

Switch components are styled with class="fsa-switch on the <label> tag, and using the class="fsa-switch__checkbox on the <input> tag.

Default

<label class="fsa-switch">
  <input type="checkbox" class="fsa-switch__checkbox" id="switch-example__123" name="switch-example__123">
  <span class="fsa-switch__track"></span>
</label>

Checked

<label class="fsa-switch">
  <input checked type="checkbox" class="fsa-switch__checkbox" id="switch-example__456" name="switch-example__456">
  <span class="fsa-switch__track"></span>
</label>

Indeterminate

The Indeterminate setting can be initiated by setting the indeterminate parameter to true on the element. For example, you can utilize JavaScript like: document.getElementById("INPUT_ID_HERE").indeterminate = true;

<label class="fsa-switch">
  <input type="checkbox" class="fsa-switch__checkbox" id="checkbox-indeterminate-example__01" name="checkbox-indeterminate-example__01">
  <span class="fsa-switch__track"></span>
</label>
<script>
  document.getElementById("checkbox-indeterminate-example__01").indeterminate = true;
</script>

Disabled

<div class="fsa-level">
  <label class="fsa-switch">
    <input disabled type="checkbox" class="fsa-switch__checkbox">
    <span class="fsa-switch__track"></span>
  </label>
  <label class="fsa-switch">
    <input checked disabled type="checkbox" class="fsa-switch__checkbox">
    <span class="fsa-switch__track"></span>
  </label>
  <label class="fsa-switch">
    <input type="checkbox" class="fsa-switch__checkbox" id="checkbox-indeterminate-example__02" disabled>
    <span class="fsa-switch__track"></span>
  </label>
</div>
<script>
  document.getElementById("checkbox-indeterminate-example__02").indeterminate = true;
</script>

Default, label on the right

Label

<span class="fsa-level fsa-level--inline">
  <label class="fsa-switch">
    <input type="checkbox" class="fsa-switch__checkbox" id="switch-example__wy7" name="switch-example__wy7">
    <span class="fsa-switch__track"></span>
  </label>
  <label for="switch-example__wy7">Label</label>
</span>

Default, label on the left

Label on the left

<span class="fsa-level fsa-level--inline">
  <label for="switch-example__hghg7s_1">Label on the left</label>
  <label class="fsa-switch">
    <input type="checkbox" class="fsa-switch__checkbox" id="switch-example__hghg7s_1" name="switch-example__hghg7s_1">
    <span class="fsa-switch__track"></span>
  </label>
</span>

Example

Combined with Box, Level, Padding Utility, and Border Between Utility arrange content in a vertical list and associate a <label> with a .fsa-switch.

Thing 1

Thing 2

Thing 3

Thing 4

<div class="fsa-grid">
  <div class="fsa-grid__1 fsa-grid__1/3@m">
    <div class="fsa-box fsa-p--none fsa-border-between-horizontal--xxs">
      <div class="fsa-level fsa-level--justify-between fsa-p--xs fsa-p-l--s fsa-p-r--s">
        <label for="switch-thing__01">Thing 1</label>
        <label class="fsa-switch">
          <input type="checkbox" class="fsa-switch__checkbox" id="switch-thing__01" name="switch-thing__01" checked="">
          <span class="fsa-switch__track"></span>
        </label>
      </div>
      <div class="fsa-level fsa-level--justify-between fsa-p--xs fsa-p-l--s fsa-p-r--s">
        <label for="switch-thing__02">Thing 2</label>
        <label class="fsa-switch">
          <input type="checkbox" class="fsa-switch__checkbox" id="switch-thing__02" name="switch-thing__02">
          <span class="fsa-switch__track"></span>
        </label>
      </div>
      <div class="fsa-level fsa-level--justify-between fsa-p--xs fsa-p-l--s fsa-p-r--s">
        <label for="switch-thing__03">Thing 3</label>
        <label class="fsa-switch">
          <input type="checkbox" class="fsa-switch__checkbox" id="switch-thing__03" name="switch-thing__03" disabled="">
          <span class="fsa-switch__track"></span>
        </label>
      </div>
      <div class="fsa-level fsa-level--justify-between fsa-p--xs fsa-p-l--s fsa-p-r--s">
        <label for="switch-thing__04">Thing 4</label>
        <label class="fsa-switch">
          <input type="checkbox" class="fsa-switch__checkbox" id="switch-thing__04" name="switch-thing__04">
          <span class="fsa-switch__track"></span>
        </label>
      </div>
    </div>
  </div>
</div>

Usage

Use

When an Application requires the User to perform a toggle action, and affect the application immediately.
When a setting within an application needs to be toggled between two different states.

Don’t Use

Within an application form as a way to select a between 2 Options. Instead utilize a Checkbox.
As an alternative for a Checkbox or Radio within a Form.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

Ensure that you utilize an <input> with the appropriate Checkbox setting so that Assistive Technologies can interpret the control.

General Guidance

A Switch Component should be used as a control within an application and provide a way to toggle between two states like a household light switch.
The Switch Component is in use on this page above in the Show Code and X-Ray toggles, and provides a great example of how it should be used.
The Indeterminate states is only available before a User has interacted with the Switch Component, and cannot be set to Indeterminate again.

Overview