Switch

• Type: Component (inputs)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/switch
• Markdown: https://ui.xzero.co.uk/components/switch/markdown
• Registry item: https://mcp.xzero.co.uk/r/switch.json
• Source file: registry/components/switch/switch.tsx
• Dependencies: @radix-ui/react-switch, motion
• Keywords: toggle, settings, react switch, toggle switch, ios toggle, radix switch, settings toggle, animated switch

When to use

• Settings that take effect as soon as they are flipped, like notifications.
• Settings lists where each row is one on and off preference.

When not to use

• Use checkbox when the choice waits for a submit button.
• Use segmented-control for a choice between named options.
• Use theme-switch for a light and dark toggle.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/switch

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { Switch } from "@/components/xzero/switch/switch";

export function NotificationsToggle() {
  const [enabled, setEnabled] = useState(true);
  return <Switch label="Email notifications" checked={enabled} onCheckedChange={setEnabled} />;
}

API reference

Switch

A Radix switch whose thumb stretches while pressed and travels on a spring.

Prop	Type	Default	Description
label	string	–	Visible label inside the switch; also used as aria-label when none is passed.
checked	boolean	–	Controlled state.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean) => void	–	Called on every toggle.
...props	ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>	–	Radix Switch root props, including ref, name, disabled, and aria-label. Pointer and key handlers are chained, not replaced.

Keyboard interactions

Keys	Action
Space / Enter	Toggles the switch. Holding Space stretches the thumb until release.

Accessibility

• Radix renders a button with role="switch" and aria-checked.
• The label prop becomes aria-label unless one is passed; icon-only usage needs an aria-label.

Motion

• Pressing stretches the thumb toward the other side like a held finger; releasing sends it across on a snappy spring.
• Reduced motion removes the stretch and moves the thumb instantly; CSS transitions are also disabled.

Responsive behavior

• The switch is inline and keeps a control-height minimum, so the whole label is a touch target.
• Hover styles apply only on fine pointers; touch gets the press stretch.

Performance

• Motion is CSS transitions on the track and thumb, with no observers or per-frame work.

Notes for AI

• Use for settings that take effect immediately. Use checkbox for choices confirmed by a submit button.
• Exported both as a named and a default export.
• Pass name to submit with a form through Radix's hidden input.

Related

• Checkbox: A binary choice with a precise, legible state.
• Segmented control: Switch between a small set of related views.
• Theme switcher: Four smooth ways to move between light and dark appearance.

Also in toggles

• Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.
• Radio group: Choose one option from a visible set.
• Rating: A simple, accessible way to capture a numeric opinion.

Guidance for AI tools

Switch: A tactile toggle for settings that take effect immediately. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt