American Express American Express |

Toggle Switches

Purpose

Toggle switches allow a user to control the selection between two options with one selection, often used to control state change (e.g. on/off).

Requirements

The DLS toggle switch component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Usage

Provide a label with the toggle switch so the action is clear. Labels should be short and appear on the left side of the toggle switch.

Toggle switch changes are immediate and don’t require any further action beyond toggling between the two mutually exclusive states. If more steps are required to make changes (such as tapping or clicking “Save”), use a checkbox instead.

Example - Toggle Switch States

Copy
<div class="stack">
  <div class="flex flex-align-center">
    <div><button data-toggle="switch" aria-labelledby="switchOnEg" role="switch" aria-checked="true" class="toggle-switch flex">
      <span class="toggle-switch-styles"></span>
    </button></div>
    <label class="margin-2-l" id="switchOnEg">
      <strong>On</strong> - A switch that has been turned on
    </label>
  </div>
  <div class="flex flex-align-center">
    <div><button data-toggle="switch" aria-labelledby="switchOffEg" role="switch" aria-checked="false" class="toggle-switch flex">
      <span class="toggle-switch-styles"></span>
    </button></div>
    <label class="margin-2-l" id="switchOffEg">
      <strong>Off</strong> - A switch that has been turned off
    </label>
  </div>
  <div class="flex flex-align-center">
    <div><button data-toggle="switch" aria-labelledby="switchDisabledOn" role="switch" aria-checked="true" class="toggle-switch flex" disabled>
      <span class="toggle-switch-styles"></span>
    </button></div>
    <label class="margin-2-l" id="switchDisabledOn">
      <strong>Disabled On</strong> - A switch that has been turned on and doesn't allow customers to interact with it
    </label>
  </div>
  <div class="flex flex-align-center">
    <div><button data-toggle="switch" aria-labelledby="switchDisabledOff" role="switch" aria-checked="false" class="toggle-switch flex" disabled>
      <span class="toggle-switch-styles"></span>
    </button></div>
    <label class="margin-2-l" id="switchDisabledOff">
      <strong>Disabled Off</strong> - A switch that has been turned off and doesn't allow customers to interact with it
    </label>
  </div>
</div>

Example - Toggle Switches with Labels

Copy
<div class="flex flex-justify-between flex-align-items-center pad-1-tb pad-responsive-lr border">
    <label id="push-notifications" class="body-3 margin-0">Push Notifications</label>
    <button
        data-toggle="switch"
        role="switch"
        class="toggle-switch flex margin-1-l"
        aria-labelledby="push-notifications"
        aria-checked="true"
    >
        <span class="toggle-switch-styles"></span>
    </button>
</div>
<div class="flex flex-justify-between flex-align-items-center pad-1-tb pad-responsive-lr border border-0-t">
    <label id="offer-alerts" class="body-3 margin-0">Offer Alerts</label>
    <button
        data-toggle="switch"
        role="switch"
        class="toggle-switch flex margin-1-l"
        aria-checked="false"
        aria-labelledby="offer-alerts"
    >
        <span class="toggle-switch-styles"></span>
    </button>
</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name Options Description
data-toggle switch Creates a switch object; required for dls.js functionality.
aria-checked true/false Specified starting checked state of the switch component. Default is false.