"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type Ctx = { value: string; setValue: (v: string) => void; name?: string }; const RadioCtx = React.createContext(null); function useRadioCtx() { const ctx = React.useContext(RadioCtx); if (!ctx) throw new Error("RadioGroupItem must be used within RadioGroup."); return ctx; } export interface RadioGroupProps extends React.HTMLAttributes { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; name?: string; } export function RadioGroup({ value, defaultValue = "", onValueChange, name, className, children, ...props }: RadioGroupProps) { const controlled = value !== undefined; const [internal, setInternal] = React.useState(defaultValue); const current = controlled ? value : internal; const setValue = (next: string) => { if (!controlled) setInternal(next); onValueChange?.(next); }; return (

{children}

); } export interface RadioGroupItemProps extends Omit, "type" | "value"> { value: string; label?: React.ReactNode; } export function RadioGroupItem({ value, label, id, className, ...props }: RadioGroupItemProps) { const ctx = useRadioCtx(); const generatedId = React.useId(); const inputId = id ?? generatedId; const checked = ctx.value === value; return ( ctx.setValue(value)} {...props} /> {label ?? value} ); }

Radio Group

Usage