Toggle

A Toggle allows users to decide on a state of an object.

Basic

HTML
    <form class="o-form">
  <div class="o-form__item">
    <div class="o-toggle is-checked">
      <div class="o-toggle__button">
        <input type="checkbox" id="toggle_basic" class="o-toggle__input" checked>
        <label class="o-toggle__label" for="toggle_basic"></label>
      </div>
    </div>
  </div>
</form>
  

With a label

HTML
    <form class="o-form">
  <div class="o-form__item">
    <div class="o-toggle o-toggle--label">
      <div class="o-toggle__button">
        <input type="checkbox" id="toggle_with_label" class="o-toggle__input">
        <label class="o-toggle__label" for="toggle_with_label">Label</label>
      </div>
    </div>
  </div>
</form>
  

Large

On
Description text
HTML
    <form class="o-form">
  <div class="o-form__item">
    <div class="o-toggle o-toggle--label o-toggle--large is-checked">
      <div class="o-toggle__button">
        <input type="checkbox" id="toggle_large" class="o-toggle__input" checked>
        <label class="o-toggle__label"></label>
      </div>
      <div>
        <label class="o-toggle__text" for="toggle_large">Label</label>
        <div class="o-toggle__value">On</div>
      </div>
    </div>
    <div class="o-form__description">Description text</div>
  </div>
</form>
  

Custom value names

Enabled
Description text
HTML
    <form class="o-form">
  <div class="o-form__item">
    <div class="o-toggle o-toggle--label o-toggle--large is-checked">
      <div class="o-toggle__button">
        <input type="checkbox" id="toggle_large_custom" class="o-toggle__input" checked>
        <label class="o-toggle__label" for="toggle_large_custom"></label>
      </div>
      <div>
        <label class="o-toggle__text" for="toggle_large_custom">Custom value</label>
        <div class="o-toggle__value" data-enabled="Enabled" data-disabled="Disabled">
          Enabled
        </div>
      </div>
    </div>
    <div class="o-form__description">Description text</div>
  </div>
</form>
  

Colors

HTML
    <form class="o-form">
  <div class="o-form__item">
    <div class="o-toggle o-toggle--color-{color}">
      <div class="o-toggle__button">
        <input type="checkbox" id="toggle_color" class="o-toggle__input">
        <label class="o-toggle__label" for="toggle_color"></label>
      </div>
    </div>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
label To use it with label set .o-toggle--label class o-toggle--label String - -
color Set with .o-toggle--color-{color} class See Colors page String - -
size Set with .o-toggle--large class large String - -
disabled Set with .is-disabled on .o-toggle and put disabled to input is-disabled String - -
data-enabled Set with data attribute data-enabled="Custom enabled string" on .o-toggle__value data-enabled String - On
data-disabled Set with data attribute data-disabled="Custom disabled string" on .o-toggle__value data-disabled String - Off