Switch

The switch every settings page needs. Click it, press Space / Enter, or grab the thumb and drag it across; the thumb moves on a spring, the track colour follows the drag progress, and on release it snaps to the far side if you crossed the halfway point or springs back otherwise. You can put on/off icons inside the thumb, which rotate and fade into each other when toggling. variant="button" turns it into a pressed-state toggle button (aria-pressed), suited to "pressed = on" cases like a text toolbar. State supports controlled and uncontrolled modes, and passing name submits it with a native form.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<Switch/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/switch.en.json

Usage

import { Moon, Sun } from "lucide-react";
import { Switch } from "@/components/ui/switch";

const [dark, setDark] = React.useState(false);

<Switch
  label="Dark mode"
  description="Switch the interface colours to match your preference"
  checked={dark}
  onCheckedChange={setDark}
  icons={{ on: <Moon />, off: <Sun /> }}
/>

// Pressed-state toggle button
<Switch variant="button" label="Bold" defaultChecked />

// Native form: submits newsletter=yes when on
<Switch name="newsletter" value="yes" label="Subscribe to the newsletter" />

Props

SwitchIcons

How it works

• Dragging: pressing on the thumb locks the pointer with setPointerCapture; the thumb follows the pointer, clamped to the track. On release it snaps to the far side if it crossed the halfway point, otherwise it springs back. Movement under 3px counts as a click, and the click the browser fires after a drag is swallowed so the switch does not toggle twice.
• The track's on-colour is a layer over the base colour: its opacity follows the drag progress 0–1, and otherwise transitions over --wb-switch-duration (150ms by default). Override the variable globally or on a parent to change the pacing.
• In dark mode the on-track is light, so the thumb turns dark to keep contrast.
• The switch is not a text input; Space / Enter are handled by the native <button>, so IME composition never interferes.
• Form submission mirrors a native checkbox: name=value is only sent when on, and nothing is sent when off.

Accessibility

• The switch variant is a <button role="switch"> with aria-checked; label is linked via htmlFor, so clicking the text toggles it too
• The button variant is a <button aria-pressed> (not role="switch"), suited to toolbars; in this variant description is provided to screen readers as visually hidden text
• description is linked via aria-describedby; the thumb and icons are hidden from assistive technology
• Keyboard: Tab to focus, then Space or Enter toggles; a focus-visible ring shows on focus; when disabled it cannot be focused or operated
• When the user has reduce motion enabled, the thumb jumps into place instead of springing, dragging is disabled (click only), icons only fade without rotating, and the toggle button no longer scales when held