Components
Loading preview...
A control allowing the user to toggle between checked and not checked.
npx shadcn@latest add https://21st.dev/r/coss.com/checkboximport { useId } from "react";
import { Checkbox } from "@/components/ui/component";
export default function Particle() {
const id = useId();
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="flex items-start gap-2">
<Checkbox defaultChecked id={id} />
<div className="flex flex-col gap-1">
<label htmlFor={id} className="text-sm font-medium cursor-pointer">
Accept terms and conditions
</label>
<p className="text-muted-foreground text-xs">
By clicking this checkbox, you agree to the terms and conditions.
</p>
</div>
</div>
</div>
);
}