Toggle

Native or ARIA switch geometry. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• toggle

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<label>
  <input class="toggle focus-ring bg-color:neutral-200 border-color:neutral-700 text-color:neutral-950 bg-color:current@::before" type="checkbox" role="switch" name="notifications">
  Notifications
</label>

Variants and composition

The same toggle geometry can style a native checkbox switch or a custom ARIA switch. Its appearance reads the checked state, not an invented color token.

The thumb has geometry but no fill; supply it with a rule such as bg-color:current@::before. Resize with definite width and height while retaining the toggle’s query container and zero padding. Its travel uses the track’s container width and follows RTL automatically.

A wrapping toggle track can read its direct input’s checked, keyboard-focus, and native disabled states. Keep that input direct so a nested control cannot unexpectedly change the track.

Behavior and accessibility

A native checkbox can expose switch semantics; an ARIA button switch needs aria-checked and activation handling. Native disabled behavior is preferable when available.

The native input restores browser appearance in forced colors and hides its custom thumb. For a custom wrapper or ARIA switch, test explicit system-color borders and marks while retaining forced-color-adjust:auto.

Reference

See the interactive Storybook specimen ↗. Continue to Toolbar or return to the Official preset overview.