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>