Toggle switch

wu-toggle turns a native checkbox with role="switch" into an on and off switch. The track is 2.25em by 1.25em with a 1em thumb, so it follows the root type size.

Class or state	Effect
`wu-toggle`	Root, on `<label>`. Switch and label in a row
`wu-toggle-input`	Part, on `<input type="checkbox" role="switch">`. Track and thumb
`wu-toggle-label`	Part. The label text
`sm`, `lg`	Small and large type size, so a smaller or larger switch
`checked`	Brand track, the thumb moves to the end
`aria-invalid="true"` or `:user-invalid`	Danger outline
`disabled`	Lower opacity on the whole label, not-allowed cursor
`animated`	Spring thumb, opt-in (see Animation)

Default

Notifications Weekly digest

<div class="flex col gap-2">
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch" checked>
    <span class="wu-toggle-label">Notifications</span>
  </label>
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch">
    <span class="wu-toggle-label">Weekly digest</span>
  </label>
</div>

Sizes

Small Default Large

<div class="flex col gap-2">
  <label class="wu-toggle sm">
    <input class="wu-toggle-input" type="checkbox" role="switch" checked>
    <span class="wu-toggle-label">Small</span>
  </label>
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch" checked>
    <span class="wu-toggle-label">Default</span>
  </label>
  <label class="wu-toggle lg">
    <input class="wu-toggle-input" type="checkbox" role="switch" checked>
    <span class="wu-toggle-label">Large</span>
  </label>
</div>

States

Invalid Disabled Disabled and on

<div class="flex col gap-2">
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch" aria-invalid="true">
    <span class="wu-toggle-label">Invalid</span>
  </label>
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch" disabled>
    <span class="wu-toggle-label">Disabled</span>
  </label>
  <label class="wu-toggle">
    <input class="wu-toggle-input" type="checkbox" role="switch" checked disabled>
    <span class="wu-toggle-label">Disabled and on</span>
  </label>
</div>

Right to left

The thumb moves toward the inline end, so it mirrors in right-to-left text.

الإشعارات

<label class="wu-toggle">
  <input class="wu-toggle-input" type="checkbox" role="switch" checked>
  <span class="wu-toggle-label">الإشعارات</span>
</label>

Animation

By default the thumb slides without overshoot. The animated word gives it a spring.

Spring thumb

<label class="wu-toggle animated">
  <input class="wu-toggle-input" type="checkbox" role="switch">
  <span class="wu-toggle-label">Spring thumb</span>
</label>

wu-animated on an ancestor turns the spring on for every toggle inside it. Both slides run only under prefers-reduced-motion: no-preference.

Accessibility

role="switch" makes screen readers announce on and off instead of checked. Space toggles it.
Keyboard focus shows the focus ring from the border-focus tokens. In forced colors mode the track and thumb use system colors with a border.

Load only the toggle

@use "@wovenui/components/toggle";

The toggle needs no other component.