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.

Angular

React

Vanilla

Figma

Last updated v4

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>

Status-indicator

Table