Radio Group

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