Toggle

an on/off switch for a setting that applies immediately.

Example

OffOnSmall

<label class="lucent-toggle lucent-toggle--md">
  <input type="checkbox" class="lucent-toggle__input" role="switch" />
  <span class="lucent-toggle__track">
    <span class="lucent-toggle__thumb">
    </span>
  </span>
  <span class="lucent-toggle__label">Off</span>
</label>
<label class="lucent-toggle lucent-toggle--md">
  <input type="checkbox" class="lucent-toggle__input" role="switch" checked />
  <span class="lucent-toggle__track">
    <span class="lucent-toggle__thumb">
    </span>
  </span>
  <span class="lucent-toggle__label">On</span>
</label>
<label class="lucent-toggle lucent-toggle--sm">
  <input type="checkbox" class="lucent-toggle__input" role="switch" checked />
  <span class="lucent-toggle__track">
    <span class="lucent-toggle__thumb">
    </span>
  </span>
  <span class="lucent-toggle__label">Small</span>
</label>

Playground

Notifications

checked

disabled

size

Using it