Checkbox

1import { Checkbox } from '@/components/ui/checkbox'
2import { Label } from '@/components/ui/label'
3
4export function CheckboxDemo() {
5    return (
6        <Label className="gap-1.5">
7            <Checkbox />
8            Click me
9        </Label>
10    )
11}
12

1import { CircleUserRound, Minus } from 'lucide-react'
2
3import { Checkbox } from '@/components/ui/checkbox'
4
5export function CheckboxDisabled() {
6    return (
7        <div className="flex gap-2">
8            <Checkbox disabled />
9            <Checkbox disabled checked />
10            <Checkbox
11                disabled
12                checked
13                indicator={<Minus className="size-2.5 stroke-4" />}
14            />
15        </div>
16    )
17}
18

1import { CircleUserRound, Minus } from 'lucide-react'
2
3import { Checkbox } from '@/components/ui/checkbox'
4import { Label } from '@/components/ui/label'
5
6export function CheckboxWithLabel() {
7    return (
8        <div className="space-y-4">
9            <div className="text-primary font-semibold">Technology</div>
10            <div className="space-y-2">
11                <Label className="items-center gap-2">
12                    <Checkbox />
13                    React
14                </Label>
15
16                <Label className="items-center gap-2">
17                    <Checkbox />
18                    Next.js
19                </Label>
20
21                <Label className="items-center gap-2">
22                    <Checkbox />
23                    Tailwind CSS
24                </Label>
25            </div>
26        </div>
27    )
28}
29

1import { CircleUserRound, Minus } from 'lucide-react'
2
3import { Checkbox } from '@/components/ui/checkbox'
4import { Label } from '@/components/ui/label'
5
6export function CheckboxAdvancedLabel() {
7    return (
8        <div className="space-y-4">
9            <Label className="border-border has-[[aria-checked=true]]:border-primary/20 flex items-start gap-3 rounded-lg border p-3 transition has-[[aria-checked=true]]:bg-gray-200 has-[[aria-checked=true]]:shadow-sm">
10                <Checkbox id="email-updates" />
11                <div className="space-y-1.5 font-normal">
12                    <p className="text-primary text-base leading-none font-medium">
13                        Receive Email Updates
14                    </p>
15                    <p className="text-sm">
16                        Get product news and updates directly to your inbox.
17                    </p>
18                </div>
19            </Label>
20            <Label className="border-border has-[[aria-checked=true]]:border-primary/20 flex items-start gap-3 rounded-lg border p-3 transition has-[[aria-checked=true]]:bg-gray-200 has-[[aria-checked=true]]:shadow-sm">
21                <Checkbox id="backup" />
22                <div className="space-y-1.5 font-normal">
23                    <p className="text-primary text-base leading-none font-medium">
24                        Enable Auto Backup
25                    </p>
26                    <p className="text-sm">
27                        Automatically back up your files once a day.
28                    </p>
29                </div>
30            </Label>
31        </div>
32    )
33}
34