Switch

Use switches when your users want to change between two distinct values.

This component is deprecated in v5

Please use the segmented control components instead.

Example

<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">
      <span aria-hidden="true" class="material-icons nj-icon-material">flash_on</span>
      <span class="nj-sr-only">Lightning strike icon</span>
    </span>
    <span class="nj-switch__slider-right">
      <span aria-hidden="true" class="material-icons nj-icon-material">wb_incandescent</span>
      <span class="nj-sr-only">Incandescent bulb icon</span>
    </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>