File name
Commit message
Commit date
File name
Commit message
Commit date
interface RadioGroupOption {
value: string;
label: string;
}
interface RadioGroupProps {
name: string;
options: RadioGroupOption[];
defaultValue?: string;
disabled?: boolean;
}
/**
* 네이티브 라디오 그룹(비제어) — 폼 제출 시 `name` 필드로 선택값이 함께 전달된다.
* React 상태를 가지지 않으므로 `'use client'`가 필요 없다.
*/
export function RadioGroup({ name, options, defaultValue, disabled = false }: RadioGroupProps) {
return (
<div role="radiogroup" className="flex items-center gap-4">
{options.map((option) => (
<label
key={option.value}
className={`flex items-center gap-2 text-body-md ${
disabled ? "text-foreground-subtle opacity-50" : "text-foreground"
}`}
>
<input
type="radio"
name={name}
value={option.value}
defaultChecked={option.value === defaultValue}
disabled={disabled}
className="size-4 accent-primary"
/>
{option.label}
</label>
))}
</div>
);
}