Radio Group

1import { Radio as RadioPrimitive } from "@base-ui/react/radio";
2import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
3 
4import { cn } from "@/registry/lib/surface";
5 
6function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
7  return (
8    <RadioGroupPrimitive
9      data-slot="radio-group"
10      className={cn("grid w-full gap-2", className)}
11      {...props}
12    />
13  );
14}
15 
16function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
17  return (
18    <RadioPrimitive.Root
19      data-slot="radio-group-item"
20      className={cn(
21        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-border bg-background outline-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] after:absolute after:-inset-x-3 after:-inset-y-2 hover:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] data-disabled:pointer-events-none data-disabled:opacity-40 aria-invalid:border-destructive data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-disabled/field:opacity-40",
22        className,
23      )}
24      {...props}
25    >
26      <RadioPrimitive.Indicator
27        data-slot="radio-group-indicator"
28        className="flex size-4 items-center justify-center"
29      >
30        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
31      </RadioPrimitive.Indicator>
32    </RadioPrimitive.Root>
33  );
34}
35 
36export { RadioGroup, RadioGroupItem };