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.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

<form>
  <div class="nj-toggle">
    <label for="toggle1">
      <input type="checkbox" id="toggle1" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Label</span>
    </label>
  </div>
</form>

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-semantic-size-spacing-16)">
  <div class="nj-toggle">
    <label for="toggle2">
      <input type="checkbox" id="toggle2" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Label</span>
    </label>
  </div>
  <div class="nj-toggle nj-toggle--lg">
    <label for="toggle3">
      <input type="checkbox" id="toggle3" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Label</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-semantic-size-spacing-16)">
  <div class="nj-toggle">
    <label for="toggle7">
      <input type="checkbox" id="toggle7" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Off</span>
    </label>
  </div>
  <div class="nj-toggle">
    <label for="toggle8">
      <input type="checkbox" id="toggle8" role="switch">
      <span class="nj-toggle__track"></span>
      <span aria-hidden="true" class="nj-toggle__icon material-icons">volume_up</span>
      <span class="nj-sr-only">Enable sound</span>
    </label>
  </div>
</form>

Disabled

Use the checked and disabled attributes directly on the input.

<form style="display: flex; align-items: center; gap: var(--nj-semantic-size-spacing-16)">
  <div class="nj-toggle nj-toggle--disabled">
    <label for="toggle4">
      <input type="checkbox" disabled id="toggle4" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Disabled</span>
  </label>
  </div>
  <div class="nj-toggle nj-toggle--disabled">
    <label for="toggle5">
      <input type="checkbox" checked disabled id="toggle5" role="switch">
      <span class="nj-toggle__track"></span>
      <span>Checked disabled</span>
    </label>
  </div>
</form>

Dark mode specific toggle

<form>
  <div class="nj-toggle">
    <label for="toggle6">
      <input type="checkbox" id="toggle6" role="switch">
      <span class="nj-toggle__track"></span>
      <svg aria-hidden="true" focusable="false" 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>
      <span class="nj-sr-only">Dark mode</span>
    </label>
  </div>
</form>

Toast

Tooltip