Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Switch
A control that indicates whether a setting is on or off.
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export default function Particle() {
return (
<Label>
<Switch />
Marketing emails
</Label>
);
}
Installation
pnpm dlx shadcn@latest add @coss/switch
Usage
import { Switch } from "@/components/ui/switch"<Switch />API Reference
Switch
Styled wrapper for Switch.Root from Base UI with built-in thumb. Size is controlled via the --thumb-size CSS variable.
Examples
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Switch field.
Disabled
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export default function Particle() {
return (
<Label>
<Switch disabled />
Marketing emails
</Label>
);
}
With Description
By enabling marketing emails, you agree to receive emails.
import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export default function Particle() {
const id = useId();
return (
<div className="flex items-start gap-2">
<Switch defaultChecked id={id} />
<div className="flex flex-col gap-1">
<Label htmlFor={id}>Marketing emails</Label>
<p className="text-muted-foreground text-xs">
By enabling marketing emails, you agree to receive emails.
</p>
</div>
</div>
);
}
Customizing Size
The switch size is controlled by the --thumb-size CSS variable. By default, the switch uses responsive sizing with [--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)] classes, making it slightly larger on mobile devices (like other interactive elements).
You can customize the size by overriding these CSS variable classes on the component. The --thumb-size value can be expressed using:
- The spacing scale:
--spacing(3),--spacing(4),--spacing(5), etc. - Fixed units:
1rem,16px, etc.
import { Switch } from "@/components/ui/switch";
export default function Particle() {
return (
<Switch className="[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]" />
);
}
Card Style
import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export default function Particle() {
const id = useId();
return (
<Label
className="flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50"
htmlFor={id}
>
<div className="flex flex-col gap-1">
<p>Enable notifications</p>
<p className="text-muted-foreground text-xs">
You can enable or disable notifications at any time.
</p>
</div>
<Switch
className="[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]"
defaultChecked
id={id}
/>
</Label>
);
}
Form Integration
"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Switch } from "@/components/ui/switch";
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
console.log(formData.get("marketing"));
const enabled = formData.get("marketing");
alert(`Marketing emails: ${enabled}`);
};
return (
<Form className="w-auto" onSubmit={onSubmit}>
<Field name="marketing">
<FieldLabel>
<Switch defaultChecked disabled={loading} name="marketing" />
Enable marketing emails
</FieldLabel>
</Field>
<Button disabled={loading} type="submit">
Submit
</Button>
</Form>
);
}