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>
    <span>Label</span>
  </label>
</div>

Size variation

Fluid provides a large version of the toggle with the .nj-toggle--lg modifier.

<form style="display: flex; align-items: center; gap: var(--nj-size-space-16)">
  <div class="nj-toggle">
    <label>
      <input type="checkbox">
      <span class="nj-toggle__track"></span>
      <span>Default</span>
    </label>
  </div>
  <div class="nj-toggle nj-toggle--lg">
    <label>
      <input type="checkbox">
      <span class="nj-toggle__track"></span>
      <span>Large</span>
    </label>
  </div>
</form>

With text or icons

You can replace the text label by an icon. Simply switch out the <span> for any material icon.

<form style="display: flex; align-items: center; gap: var(--nj-size-space-16)">
  <div class="nj-toggle mb-3">
    <label>
      <input type="checkbox">
      <span class="nj-toggle__track"></span>
      <span>Off</span>
    </label>
  </div>
  <div class="nj-toggle mb-3">
    <label>
      <input type="checkbox">
      <span class="nj-toggle__track"></span>
      <i class="nj-toggle__icon material-icons">volume_up</i>
    </label>
  </div>
</form>

Disabled

Use the checked and disabled attributes directly on the input.

<form style="display: flex; flex-direction: column; gap: 16px;">
  <div class="nj-toggle nj-toggle--disabled">
    <label>
      <input type="checkbox" disabled>
      <span class="nj-toggle__track"></span>
      <span>Disabled</span>
    </label>
  </div>
  <div class="nj-toggle nj-toggle--disabled">
    <label>
      <input type="checkbox" disabled checked>
      <span class="nj-toggle__track"></span>
      <span>Checked disabled</span>
    </label>
  </div>
</form>

Dark mode specific toggle

<form>
  <div class="nj-toggle">
    <label>
      <input type="checkbox">
      <span class="nj-toggle__track"></span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="nj-toggle__icon">
        <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>
</form>