Radio Group

"use client"

import { Radio as RadioPrimitive } from "@base-ui/react/radio"
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"

import { cn } from "@/lib/utils"

function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
  return (
    <RadioGroupPrimitive
      data-slot="radio-group"
      className={cn("grid w-full gap-3", className)}
      {...props}
    />
  )
}

function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
  return (
    <RadioPrimitive.Root
      data-slot="radio-group-item"
      className={cn(
        "group/radio-group-item peer relative flex size-4 shrink-0 items-center justify-center rounded-full border border-input transition-colors not-data-disabled:cursor-pointer group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden aria-invalid:ring-3 aria-invalid:ring-destructive/20 not-data-checked:aria-invalid:border-destructive dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 [&[data-disabled]~[data-slot=field-label]]:cursor-not-allowed [&~[data-slot=field-label]]:cursor-pointer",
        className
      )}
      {...props}
    >
      <RadioPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="flex items-center justify-center text-primary group-aria-invalid/radio-group-item:text-destructive"
      >
        <svg
          className="size-full fill-background"
          viewBox="0 0 14 14"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="7" cy="7" r="3.5" />
        </svg>
      </RadioPrimitive.Indicator>
    </RadioPrimitive.Root>
  )
}

export { RadioGroup, RadioGroupItem }

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

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