The Switch component provides a toggle control for binary on/off states with multiple visual variants and sizes.
Installation
npx shadcn@latest add @eo-n/switch
Install dependencies
Install the required packages:npm install @base-ui/react class-variance-authority
Copy component code
Copy and paste the switch component code into your project at components/ui/switch.tsx.
Update imports
Update the import paths to match your project setup.
import { Switch } from "@/components/ui/switch";
export default function Example() {
return <Switch />;
}
Examples
Default
With Label
import { Label } from "@/components/ui/label";
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>
Controlled
import { useState } from "react";
function ControlledSwitch() {
const [checked, setChecked] = useState(false);
return (
<div className="flex items-center space-x-2">
<Switch
id="notifications"
checked={checked}
onCheckedChange={setChecked}
/>
<Label htmlFor="notifications">
{checked ? "Notifications enabled" : "Notifications disabled"}
</Label>
</div>
);
}
Disabled
<Switch disabled />
<Switch disabled checked />
Square Variant
<Switch variant="square" />
Square with Sizes
<Switch variant="square" size="sm" />
<Switch variant="square" size="default" />
<Switch variant="square" size="lg" />
In a Form
function FormExample() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
console.log(formData.get('marketing'));
};
return (
<form onSubmit={handleSubmit}>
<div className="flex items-center space-x-2">
<Switch id="marketing" name="marketing" />
<Label htmlFor="marketing">Marketing emails</Label>
</div>
<button type="submit">Submit</button>
</form>
);
}
API Reference
Extends all props from @base-ui/react Switch.Root component.
The visual style of the switch.Options: default | square
The size of the switch.Options: sm | default | lg
The controlled checked state.
The default checked state when uncontrolled.
Callback fired when the checked state changes.(checked: boolean) => void
Whether the switch is disabled.
Whether the switch is required in a form.
The name attribute for form submission.
The value attribute for form submission.
Additional CSS classes to apply.
TypeScript
import { Switch as SwitchPrimitive } from "@base-ui/react";
import { VariantProps } from "class-variance-authority";
type SwitchVariants = VariantProps<typeof switchVariants>;
interface SwitchProps
extends React.ComponentProps<typeof SwitchPrimitive.Root>,
SwitchVariants {}
Styling Features
- Smooth animations with 150ms transition
- Focus visible indicator
- Disabled state styling
- Dark mode support
- Customizable variants (rounded/square)
- Multiple size options
- Shadow effects for depth
Accessibility
- Fully keyboard accessible (Space to toggle)
- Proper ARIA attributes
- Focus visible indicator
- Works with form labels
- Screen reader support
Related
