Switch

Use switches when your users want to change between two distinct values. For example, if they need to change between euro and kwh.

In most use cases, this configuration action will change another interface element:\ for example on a dashboard other data is displayed after the switch has been clicked.

The switch is an important element of the interface, because the user often has an interaction with it. This is why it must be visible at a glance if a switch has been selected.

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

Tabs