Radio Group

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="comfortable" className="w-72">
  <Field orientation="horizontal">
    <RadioGroupItem value="default" id="desc-r1" />
    <FieldContent>
      <FieldLabel htmlFor="desc-r1">Default</FieldLabel>
      <FieldDescription>Standard spacing for most use cases.</FieldDescription>
    </FieldContent>
  </Field>
  {/* ... */}
</RadioGroup>

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="plus" className="w-72">
  <FieldLabel htmlFor="plus-plan">
    <Field orientation="horizontal">
      <FieldContent>
        <FieldTitle className="text-xs">Plus</FieldTitle>
        <FieldDescription className="font-sans tracking-normal normal-case">
          For individuals and small teams.
        </FieldDescription>
      </FieldContent>
      <RadioGroupItem value="plus" id="plus-plan" />
    </Field>
  </FieldLabel>
  {/* ... */}
</RadioGroup>

import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<FieldSet className="w-72">
  <FieldLegend variant="label">Subscription plan</FieldLegend>
  <FieldDescription>Yearly and lifetime plans offer savings.</FieldDescription>
  <RadioGroup defaultValue="monthly">
    <Field orientation="horizontal">
      <RadioGroupItem value="monthly" id="plan-monthly" />
      <FieldLabel htmlFor="plan-monthly" className="font-normal normal-case">
        Monthly ($9.99/mo)
      </FieldLabel>
    </Field>
    {/* ... */}
  </RadioGroup>
</FieldSet>

import { Field, FieldLabel } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="option2" className="w-48">
  <Field orientation="horizontal" data-disabled>
    <RadioGroupItem value="option1" id="disabled-1" disabled />
    <FieldLabel htmlFor="disabled-1" className="font-normal">Disabled</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="option2" id="disabled-2" />
    <FieldLabel htmlFor="disabled-2" className="font-normal">Option 2</FieldLabel>
  </Field>
</RadioGroup>

import {
  Field,
  FieldError,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<FieldSet className="w-72">
  <FieldLegend variant="label">Notifications</FieldLegend>
  <RadioGroup defaultValue="email">
    <Field orientation="horizontal" data-invalid>
      <RadioGroupItem value="email" id="invalid-email" aria-invalid />
      <FieldLabel htmlFor="invalid-email" className="font-normal normal-case">
        Email only
      </FieldLabel>
    </Field>
    {/* ... */}
  </RadioGroup>
  <FieldError>Please choose a valid option.</FieldError>
</FieldSet>