Get Orange

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

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

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

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