Switch

Toggle component with a thumb element. Accessible — renders as a <button role="switch"> with aria-checked.

Features

Renders as button with role=“switch” and aria-checked.

Can be controlled or uncontrolled.

Keyboard toggle with Space key.

Supports disabled state.

Example

Push notifications

Email updates

Marketing emails

Anatomy


import { Switch } from '@wire-ui/react'
 
{[
{ label: 'Push notifications', value: pushEnabled, onChange: setPushEnabled },
{ label: 'Email updates', value: emailEnabled, onChange: setEmailEnabled },
{ label: 'Marketing', value: marketingEnabled, onChange: setMarketingEnabled },
].map(({ label, value, onChange }) => (
<div key={label}>
<p>{label}</p>
<Switch.Root checked={value} onChange={onChange}>
  <Switch.Thumb />
</Switch.Root>
</div>
))}

Styling

Switch uses data-state (value "checked" or "unchecked") on both Root and Thumb. Use data-checked as a shorthand for the checked state.


<Switch.Root className="
  bg-gray-200
  data-[checked]:bg-black
  data-[disabled]:opacity-50
  data-[focus-visible]:ring-2
">
  <Switch.Thumb className="
    bg-white translate-x-0
    data-[checked]:translate-x-5
  " />
</Switch.Root>

Using data attributes

Switch sets data-state ("checked" / "unchecked") and data-disabled on Root and Thumb.


/* Track background */
[data-state="checked"]   { background: #000; }
[data-state="unchecked"] { background: #e5e5e5; }
 
/* Thumb position */
.thumb[data-state="checked"] { transform: translateX(20px); }
 
/* Disabled */
[data-disabled] { opacity: 0.5; cursor: not-allowed; }

Root props

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial state for uncontrolled use
`onCheckedChange`	`(checked: boolean) => void`	—	Called when toggled
`disabled`	`boolean`	`false`	Disables the switch

Data attributes

Attribute	Element	Values
`data-state`	Root, Thumb	`"checked"` / `"unchecked"`
`data-disabled`	Root	Present when disabled

Accessibility

role="switch" with aria-checked reflects the current state
Keyboard: Space toggles the switch

Keyboard Interactions

Key	Description
`Space`	Toggles the switch on/off.
`Tab`	Moves focus to the switch.