Switch
A compact toggle control for switching a setting between checked and unchecked states. The bundled example pairs it with a visible Label using a shared `id` and `htmlFor`.
componentregistry-item.json
Installed with plain
See how it was built shadcn add · no workarounds · theme an agent is reading the install docsInstallation
pnpm dlx shadcn@latest add @bundui/switch
Requires @bundui in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import { Switch } from "@/components/ui/switch";export default function SwitchExample() { return <Switch id="airplane-mode" aria-label="Airplane Mode" />;}- Use for binary settings such as Airplane Mode, notifications, or visibility.
- Use when the change can be applied immediately without an explicit submit action.
- Pair with a visible Label for clear identification.
- Prefer a checkbox when the control is part of a form that requires an explicit save or submit action.
Examples
Labeled setting
Pairs the switch with the shadcn/ui Label component.
labeled-setting.tsx
import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";export default function AirplaneMode() { return ( <div className="flex items-center space-x-2"> <Switch id="airplane-mode" /> <Label htmlFor="airplane-mode">Airplane Mode</Label> </div> );}Controlled switch
Controls the checked state from React state.
controlled-switch.tsx
import { useState } from "react";import { Switch } from "@/components/ui/switch";export default function NotificationsSwitch() { const [enabled, setEnabled] = useState(true); return ( <Switch checked={enabled} onCheckedChange={setEnabled} aria-label="Enable notifications" /> );}Disabled switch
Shows a switch that cannot currently be changed.
disabled-switch.tsx
import { Switch } from "@/components/ui/switch";export default function DisabledSwitch() { return <Switch disabled aria-label="Unavailable setting" />;}API reference
PropTypeDefaultDescription
checkedboolean—Controls whether the switch is checked. Use with `onCheckedChange` for a controlled switch.
defaultCheckedboolean—The initial checked state when the switch is uncontrolled.
onCheckedChange(checked: boolean) => void—Called when the checked state changes.
disabledboolean—Prevents interaction and applies the disabled styling.
requiredboolean—Marks the switch as required when used in a form.
namestring—The name submitted with the switch's form value.
valuestring—The value submitted with the switch's form value.
idstring—The DOM id used to associate the switch with a label.
classNamestring—Additional CSS classes merged with the component's default classes.
asChildboolean—Renders the switch using its child element through Radix Slot.
Accessibility
- Use a visible `Label` with a matching `htmlFor` and `id`, or provide an accessible name with `aria-label` or `aria-labelledby`.
- The underlying switch exposes switch semantics and supports keyboard interaction through the Radix UI primitive.
- Do not rely on color alone to communicate the state; the thumb position and accessible checked state distinguish checked from unchecked.
- Use `disabled` for unavailable settings and ensure the disabled appearance has sufficient contrast.
Docs written by openai:gpt-5.6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "Switch" component (bundui/switch) from its shadcn registry.1. Install it with: npx shadcn@latest add @bundui/switch2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: checked, defaultChecked, onCheckedChange, disabled, required, name, value, id, className, asChild.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { Switch } from "@/components/ui/switch";export default function SwitchExample() { return <Switch id="airplane-mode" aria-label="Airplane Mode" />;}```Files & dependencies
- examples/components/switch/01/page.tsx→ components/switch.tsx
registryDependencieslabelswitch
Uses from @bundui