Radio Group

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

<RadioGroup defaultValue="option-one">
  <Field orientation="horizontal">
    <RadioGroupItem value="option-one" id="option-one" />
    <FieldLabel htmlFor="option-one">Option One</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="option-two" id="option-two" />
    <FieldLabel htmlFor="option-two">Option Two</FieldLabel>
  </Field>
</RadioGroup>

{/* Whole group disabled */}
<RadioGroup defaultValue="default" disabled>
  <Field orientation="horizontal" data-disabled="true">
    <RadioGroupItem value="default" id="default" />
    <FieldLabel htmlFor="default">Default</FieldLabel>
  </Field>
  <Field orientation="horizontal" data-disabled="true">
    <RadioGroupItem value="comfortable" id="comfortable" />
    <FieldLabel htmlFor="comfortable">Comfortable</FieldLabel>
  </Field>
</RadioGroup>
 
{/* Individual item disabled */}
<RadioGroup defaultValue="comfortable">
  <Field orientation="horizontal" data-disabled="true">
    <RadioGroupItem value="default" id="default" disabled />
    <FieldLabel htmlFor="default">Default</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="comfortable" id="comfortable" />
    <FieldLabel htmlFor="comfortable">Comfortable</FieldLabel>
  </Field>
</RadioGroup>

<RadioGroup defaultValue="starter">
  <Field orientation="horizontal">
    <RadioGroupItem value="starter" id="starter" />
    <FieldContent>
      <FieldLabel htmlFor="starter">Starter</FieldLabel>
      <FieldDescription>Perfect for individuals and small teams.</FieldDescription>
    </FieldContent>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="pro" id="pro" />
    <FieldContent>
      <FieldLabel htmlFor="pro">Pro</FieldLabel>
      <FieldDescription>For growing businesses with advanced needs.</FieldDescription>
    </FieldContent>
  </Field>
</RadioGroup>

<FieldSet>
  <FieldLegend>Density</FieldLegend>
  <RadioGroup defaultValue="comfortable">
    <Field orientation="horizontal">
      <RadioGroupItem value="default" id="default" />
      <FieldLabel htmlFor="default">Default</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="comfortable" id="comfortable" />
      <FieldLabel htmlFor="comfortable">Comfortable</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="compact" id="compact" />
      <FieldLabel htmlFor="compact">Compact</FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>

<FieldSet>
  <FieldLegend>Payment method</FieldLegend>
  <RadioGroup aria-invalid>
    <Field orientation="horizontal">
      <RadioGroupItem value="card" id="card" />
      <FieldLabel htmlFor="card">Credit card</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="paypal" id="paypal" />
      <FieldLabel htmlFor="paypal">PayPal</FieldLabel>
    </Field>
  </RadioGroup>
  <FieldError>Please select a payment method.</FieldError>
</FieldSet>

<RadioGroup defaultValue="starter" className="grid gap-3">
  <FieldLabel>
    <Field orientation="horizontal">
      <RadioGroupItem value="starter" id="starter" />
      <FieldContent>
        <FieldLabel htmlFor="starter">Starter</FieldLabel>
        <FieldDescription>$9 / month</FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
  <FieldLabel>
    <Field orientation="horizontal">
      <RadioGroupItem value="pro" id="pro" />
      <FieldContent>
        <FieldLabel htmlFor="pro">Pro</FieldLabel>
        <FieldDescription>$29 / month</FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</RadioGroup>

npx shadcn@latest add https://solar-ui.com/r/radio-group.json

npm install @radix-ui/react-radio-group

"use client"
 
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
 
function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return <RadioGroupPrimitive.Root className={cn("grid gap-3", className)} {...props} />
}
 
function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      className={cn(
        "border-input text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="relative flex items-center justify-center">
        <CircleIcon className="fill-primary size-2.5" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}
 
export { RadioGroup, RadioGroupItem }