Toggle

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

Basic

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

With a label

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

Large

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

Custom value names

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

Colors

HTML
    <form class="form">
  <div class="form__item">
    <div class="toggle toggle--color-{color}">
      <div class="toggle__button">
        <input type="checkbox" id="toggle_color" class="toggle__input">
        <label class="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 .toggle--label class toggle--label String - -
color Set with .toggle--color-{color} class See Colors page String - -
size Set with .toggle--large class large String - -
disabled Set with .is-disabled on .toggle and put disabled to input is-disabled String - -
data-enabled Set with data attribute data-enabled="Custom enabled string" on .toggle__value data-enabled String - On
data-disabled Set with data attribute data-disabled="Custom disabled string" on .toggle__value data-disabled String - Off