Swap

Overlaid faces switched by a consumer-owned state. 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

• swap, swap-on, swap-off, swap-indeterminate, swap--active, swap--rotate, swap--scale

Example

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

<label class="swap">
  <input type="checkbox" aria-label="Show details">
  <span class="swap-off" aria-hidden="true">Show</span>
  <span class="swap-on" aria-hidden="true">Hide</span>
</label>

Variants and composition

swap-on, swap-off, and swap-indeterminate are mutually visible faces. swap–active can be driven by a class; swap–rotate and swap–scale add motion that collapses under reduced motion.

Put the native input before its direct faces. Checked shows swap-on; indeterminate shows swap-indeterminate, even when swap--active is set. Nested swaps reset their own state instead of borrowing the outer input. The fade takes 150ms; rotate and scale take 300ms. Reduced motion removes both transitions and transformed poses.

Behavior and accessibility

The application owns the checked or active state. Hide decorative faces from assistive technology and name the control; inactive faces are excluded from selection.

Reference

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