Get Orange

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

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

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

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