A toggle switch changes on and off states of a single setting.

To create a toggle switch, wrap an input[type="checkbox"] element and a label element in a block-level wrapper (like a div) with the .toggle-switch classname. To use a toggle without any label, keep the label tag empty. The default toggle is gray in its “off” state and green in its “on” state. The user can change states by clicking on either the toggle or its accompanying label. You can move the label to the right side by adding the right-label class.

Disabled Toggles

To disable a toggle switch, add the disabled attribute to the toggle’s checkbox input. When disabled, the toggle appears gray. The user cannot change the state of the toggle. And the present state is reflected in both the location of the toggle switch and by the “on” state being a slightly darker gray.

<form>
    <section class="form-block">
        <div class="form-group">
            <label>Toggles</label>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_1">
                <label for="toggle_1">Toggles turn on and off</label>
            </div>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_2" disabled>
                <label for="toggle_2">Toggle off and disabled</label>
            </div>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_3" checked disabled>
                <label for="toggle_3">Toggle on and disabled</label>
            </div>
        </div>
    </section>
    <section class="form-block">
        <div class="form-group">
            <label>Toggles without any label</label>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_4">
                <label for="toggle_4"></label>
            </div>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_5" checked>
                <label for="toggle_5"></label>
            </div>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_6" checked disabled>
                <label for="toggle_6"></label>
            </div>
            <div class="toggle-switch">
                <input type="checkbox" id="toggle_7" disabled>
                <label for="toggle_7"></label>
            </div>
        </div>
    </section>
    <section class="form-block">
      <div class="form-group">
          <label for="formGroupExampleInput">Right Label Toggles</label>
          <div class="toggle-switch right-label">
              <input type="checkbox" id="toggle_4">
              <label for="toggle_4">Toggles turn on and off</label>
          </div>
          <div class="toggle-switch right-label">
              <input type="checkbox" id="toggle_5" disabled>
              <label for="toggle_5">Toggle off and disabled</label>
          </div>
        </div>
    </section>
</form>

Usage

Use a toggle switch when you need the sole options of “on” and “off.”

Toggle switches take up less space than an “on/off” radio button group and communicate their intended purpose better than a checkbox that toggles functionality.

Toggle States

Toggle switches do not include “ON” and “OFF” text because these states are clearly implied.

Label

The label should clearly describe the setting. Although Clarity supports a toggle switch without a label, use this approach only if the purpose of the control is made clear elsewhere, for example, in a group label or section header.