Switch
Use switches when your users want to change between two distinct values.
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>