Radio Group

1import { Label } from '@/components/ui/label'
2import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
3
4export function RadioGroupDemo() {
5    return (
6        <RadioGroup defaultValue="daily">
7            <div className="flex items-center gap-2">
8                <RadioGroupItem value="instant" id="r1" />
9                <Label htmlFor="r1">Instant</Label>
10            </div>
11            <div className="flex items-center gap-2">
12                <RadioGroupItem value="daily" id="r2" />
13                <Label htmlFor="r2">Daily</Label>
14            </div>
15            <div className="flex items-center gap-2">
16                <RadioGroupItem value="weekly" id="r3" />
17                <Label htmlFor="r3">Weekly</Label>
18            </div>
19        </RadioGroup>
20    )
21}
22

1import { Label } from '@/components/ui/label'
2import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
3
4export function RadioGroupDisabled() {
5    return (
6        <RadioGroup defaultValue="daily" className='flex items-center gap-2'>
7            <RadioGroupItem value="instant" id="r1" disabled />
8            <RadioGroupItem value="daily" id="r2" checked disabled />
9        </RadioGroup>
10    )
11}
12

1'use client'
2
3import * as React from 'react'
4
5import { Label } from '@/components/ui/label'
6import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
7
8export function RadioGroupAdvancedLabel() {
9    return (
10        <RadioGroup defaultValue="monthly" className="">
11            <Label
12                htmlFor="monthly"
13                className="border-border has-[[data-state=checked]]:border-primary/20 flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition has-[[data-state=checked]]:bg-gray-200 has-[[data-state=checked]]:shadow-sm"
14            >
15                <RadioGroupItem value="monthly" id="monthly" />
16                <div className="space-y-1.5 font-normal">
17                    <p className="text-primary text-base leading-none font-medium">
18                        Monthly Plan
19                    </p>
20                    <p className="text-gray text-xs">
21                        Billed every month. Cancel anytime.
22                    </p>
23                </div>
24            </Label>
25
26            <Label
27                htmlFor="yearly"
28                className="border-border has-[[data-state=checked]]:border-primary/20 flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition has-[[data-state=checked]]:bg-gray-200 has-[[data-state=checked]]:shadow-sm"
29            >
30                <RadioGroupItem value="yearly" id="yearly" />
31                <div className="space-y-1.5 font-normal">
32                    <p className="text-primary text-base leading-none font-medium">
33                        Yearly Plan
34                    </p>
35                    <p className="text-gray text-xs">
36                        Save 20% when you choose annual billing.
37                    </p>
38                </div>
39            </Label>
40
41            <Label
42                htmlFor="lifetime"
43                className="border-border has-[[data-state=checked]]:border-primary/20 flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition has-[[data-state=checked]]:bg-gray-200 has-[[data-state=checked]]:shadow-sm"
44            >
45                <RadioGroupItem value="lifetime" id="lifetime" />
46                <div className="space-y-1.5 font-normal">
47                    <p className="text-primary text-base leading-none font-medium">
48                        Lifetime Access
49                    </p>
50                    <p className="text-gray text-xs">
51                        Pay once, own it forever. No recurring fees.
52                    </p>
53                </div>
54            </Label>
55        </RadioGroup>
56    )
57}
58