Yammer Yammer Yammer email

Switch

Switch is used to quickly select between two possible statuses.

Examples

<form>
  <div class="nj-switch">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>

  <div class="nj-switch">
    <label>
      <input type="checkbox" checked />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>

  <div class="nj-switch">
    <label>
      <input type="checkbox" disabled />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>
</form>

With icons

<form>
  <div class="nj-switch">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">
          <i class="material-icons">flash_on</i>
        </span>
        <span class="nj-switch__slider-right">
          <i class="material-icons">wb_incandescent</i>
        </span>
      </span>
    </label>
  </div>
</form>

Theme colors

<form>
  <div class="nj-switch nj-switch--primary">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>
  <div class="nj-switch nj-switch--success">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>
  <div class="nj-switch nj-switch--danger">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>
  <div class="nj-switch nj-switch--warning">
    <label>
      <input type="checkbox" />
      <span class="nj-switch__slider">
        <span class="nj-switch__slider-left">EURO</span>
        <span class="nj-switch__slider-right">kWh</span>
      </span>
    </label>
  </div>
</form>