Switch

Native CSS switch component derived from the List trailing switch source, node 930:4101.

Default

Email alerts Off state keeps the thumb on the left. Push alerts On state moves the thumb to the right.

Use switch for immediate on/off settings. Use checkbox for selection, acknowledgment, or multi-select choices.

States

Hover Static hover example. Focus visible Keyboard focus uses an outline. Disabled Disabled input keeps native semantics. Disabled on Thumb position still communicates state.

For deferred persistence, keep the native checked value as the visual source of truth and disable the switch only when the application cannot accept another change.

List Integration

List item with switch The trailing control is a native switch input.

CSS API

Use .sui-switch as the label/root, .sui-switch__control for the native input, and role="switch" for toggle semantics.

<label class="sui-switch">
  <input class="sui-switch__control" type="checkbox" role="switch">
  <span class="sui-switch__track" aria-hidden="true">
    <span class="sui-switch__thumb"></span>
  </span>
  <span class="sui-switch__body">
    <span class="sui-switch__label">Label</span>
    <span class="sui-switch__helper">Helper text</span>
  </span>
</label>