Radio Group

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import {
6  Field,
7  FieldContent,
8  FieldDescription,
9  FieldLabel,
10  FieldLegend,
11  FieldSet,
12} from "@/registry/radix-sera/ui/field"
13import {
14  RadioGroup,
15  RadioGroupItem,
16} from "@/registry/radix-sera/ui/radio-group"
17 
18export default function RadioGroupExample() {
19  return (
20    <ExampleWrapper>
21      <RadioGroupBasic />
22      <RadioGroupWithDescriptions />
23      <RadioGroupWithFieldSet />
24      <RadioGroupGrid />
25      <RadioGroupDisabled />
26      <RadioGroupInvalid />
27    </ExampleWrapper>
28  )
29}
30 
31function RadioGroupBasic() {
32  return (
33    <Example title="Basic">
34      <RadioGroup defaultValue="comfortable">
35        <Field orientation="horizontal">
36          <RadioGroupItem value="default" id="r1" />
37          <FieldLabel htmlFor="r1" className="font-normal">
38            Default
39          </FieldLabel>
40        </Field>
41        <Field orientation="horizontal">
42          <RadioGroupItem value="comfortable" id="r2" />
43          <FieldLabel htmlFor="r2" className="font-normal">
44            Comfortable
45          </FieldLabel>
46        </Field>
47        <Field orientation="horizontal">
48          <RadioGroupItem value="compact" id="r3" />
49          <FieldLabel htmlFor="r3" className="font-normal">
50            Compact
51          </FieldLabel>
52        </Field>
53      </RadioGroup>
54    </Example>
55  )
56}
57 
58function RadioGroupWithDescriptions() {
59  return (
60    <Example title="With Descriptions">
61      <RadioGroup defaultValue="plus">
62        <FieldLabel htmlFor="plus-plan">
63          <Field orientation="horizontal">
64            <FieldContent>
65              <div className="font-medium">Plus</div>
66              <FieldDescription>
67                For individuals and small teams
68              </FieldDescription>
69            </FieldContent>
70            <RadioGroupItem value="plus" id="plus-plan" />
71          </Field>
72        </FieldLabel>
73        <FieldLabel htmlFor="pro-plan">
74          <Field orientation="horizontal">
75            <FieldContent>
76              <div className="font-medium">Pro</div>
77              <FieldDescription>For growing businesses</FieldDescription>
78            </FieldContent>
79            <RadioGroupItem value="pro" id="pro-plan" />
80          </Field>
81        </FieldLabel>
82        <FieldLabel htmlFor="enterprise-plan">
83          <Field orientation="horizontal">
84            <FieldContent>
85              <div className="font-medium">Enterprise</div>
86// … truncated