Components
An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring through the data-checked:* utilities. Re-exports SwitchPrimitive for advanced composition.
npx @21st-dev/cli add cnippet.dev/cnippet-switchLoading preview...
"use client";
import { useId } from "react";
import { Switch } from "@/components/ui/cnippet-switch";
export default function SwitchChecked() {
const id = useId();
return (
<div className="flex items-start gap-2">
<Switch defaultChecked id={id} />
<div className="flex flex-col gap-1">
<label className="font-medium text-sm" htmlFor={id}>
Marketing emails
</label>
<p className="text-muted-foreground text-xs">
By enabling marketing emails, you agree to receive emails.
</p>
</div>
</div>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...