Toggle

Use toggles when your users can turn something on or off instantly. For example, if they need to enable or disabled the notifications. This component have been in user interfaces for a long time so it should be used as expected. Keep in mind that toggle should only be used when the user needs to decide between two opposing states.

The toggle 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.

Example

<div class="nj-toggle">
  <label>
    <input type="checkbox">
    <span class="nj-toggle__track"></span>
  </label>
</div>

Dark mode specific toggle

<div class="nj-toggle">
    <label>
      <input type="checkbox">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon-dm mr-1">
        <path d="M8 3.2a.4.4 0 00.4-.4V.4a.4.4 0 10-.8 0v2.4a.4.4 0 00.4.4zm4 1.41l1.7-1.7a.4.4 0 00-.57-.57L11.39 4a.4.4 0 00.57.57zm3.64 3H13.2a.4.4 0 100 .8h2.4a.4.4 0 100-.8zm-4.21 3.79a.42.42 0 01.57 0l1.7 1.7a.4.4 0 01-.57.57L11.39 12a.42.42 0 010-.61zM3.18 7.86a.43.43 0 01-.13.45.38.38 0 01-.25.09H.4a.4.4 0 110-.8h2.4a.41.41 0 01.38.26zM8 12.8a.4.4 0 00-.4.4v2.4a.4.4 0 10.8 0v-2.4a.4.4 0 00-.4-.4zm-4-1.41a.41.41 0 01.5-.05.42.42 0 01.18.3.41.41 0 01-.11.32l-1.7 1.7a.4.4 0 01-.57-.57L3.47 12zM3.48 4l.52.61A.4.4 0 004.61 4l-1.7-1.7a.4.4 0 00-.57.57zM8 4a4 4 0 104 4 4 4 0 00-4-4zm0 7.19A3.2 3.2 0 1111.22 8a3.17 3.17 0 01-.93 2.27A3.22 3.22 0 018 11.2z" fill-rule="evenodd"/>
      </svg>
      <span class="nj-toggle__track"></span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon-dm ml-1">
        <path d="M9.53 16h-.48a8 8 0 01-7.4-8.47A7.94 7.94 0 019.52 0h.94l-.64.6a7.71 7.71 0 00-2.06 8 7.6 7.6 0 006.3 5.23l.87.1-.7.52A7.77 7.77 0 019.53 16zM8.71.74a7.31 7.31 0 00.38 14.54 7.06 7.06 0 004-.94 8.35 8.35 0 01-6-5.55A8.48 8.48 0 018.71.74z"/>
      </svg>
    </label>
</div>

With text or icons

<div class="nj-toggle mb-3">
    <label>
      <input type="checkbox">
      <span class="mr-1">Off</span>
      <span class="nj-toggle__track"></span>
      <span class="ml-1">On</span>
    </label>
</div>
<div class="nj-toggle mb-3">
    <label>
      <input type="checkbox">
      <i class="material-icons mr-1">volume_off</i>
      <span class="nj-toggle__track"></span>
      <i class="material-icons ml-1">volume_up</i>
    </label>
</div>

Disabled

<div class="nj-toggle mb-3">
    <label>
      <input type="checkbox" disabled>
      <span class="mr-1">Off</span>
      <span class="nj-toggle__track"></span>
      <span class="ml-1">On</span>
    </label>
</div>
<div class="nj-toggle mb-3">
    <label>
      <input type="checkbox" checked disabled>
      <span class="mr-1">Off</span>
      <span class="nj-toggle__track"></span>
      <span class="ml-1">On</span>
    </label>
</div>

Theme colors

Fluid Design System includes several predefined toggle styles, each serving its own semantic purpose according to the theme colors palette.

<form>
    <div class="nj-toggle nj-toggle--primary">
      <label>
        <input type="checkbox" checked>
        <span class="nj-toggle__track"></span>
        <span class="ml-1">Primary</span>
      </label>
    </div>
    <div class="nj-toggle nj-toggle--success">
      <label>
        <input type="checkbox" checked>
        <span class="nj-toggle__track"></span>
        <span class="ml-1">Success</span>
      </label>
    </div>
    <div class="nj-toggle nj-toggle--danger">
      <label>
        <input type="checkbox" checked>
        <span class="nj-toggle__track"></span>
        <span class="ml-1">Danger</span>
      </label>
    </div>
    <div class="nj-toggle nj-toggle--warning">
      <label>
        <input type="checkbox" checked>
        <span class="nj-toggle__track"></span>
        <span class="ml-1">Warning</span>
      </label>
    </div>
    <div class="nj-toggle nj-toggle--light">
      <label>
        <input type="checkbox" checked>
        <span class="nj-toggle__track"></span>
        <span class="ml-1">Light</span>
      </label>
    </div>
</form>