1<div className="flex flex-col gap-3">
2 <div className="flex items-center gap-3">
3 <Checkbox id="checkbox-1" />
4 <label htmlFor="checkbox-1">Default Checkbox</label>
5 </div>
6 <div className="flex items-center gap-3">
7 <Checkbox id="checkbox-2" disabled />
8 <label htmlFor="checkbox-2">Disabled Checkbox</label>
9 </div>
10 <div className="flex items-center gap-3">
11 <Checkbox id="checkbox-animation" />
12 <label htmlFor="checkbox-animation">Animation Checkbox</label>
13 </div>
14 <label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
15 <Checkbox
16 id="checkbox-3"
17 defaultChecked
18 className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
19 />
20 <div className="grid gap-1.5 font-normal">
21 <p className="text-sm leading-none font-medium">Checkbox Block</p>
22 <p className="text-muted-foreground text-sm">
23 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
24 quos.
25 </p>
26 </div>
27 </label>
28</div>