본문으로 건너뛰기
선택

라디오 그룹

서로 배타적인 옵션을 하나의 fieldset과 legend로 묶어 단일 선택 의미를 제공한다.

상태

결제 주기
stack
결제 주기
inline

활용 방법

제어 상태

value와 onChange를 사용하면 선택값을 외부 상태에서 제어한다.

Preview
플랜
tsx
<RadioGroup name="plan" value={plan} onChange={setPlan} options={options} />

속성

이름타입기본값설명
optionsRadioOption[]-선택지의 value, label, description, disabled
namestring-그룹 내 radio가 공유하는 name
valuestring-제어 선택값
defaultValuestring-비제어 초기 선택값
onChange(value: string) => void-선택값 변경 콜백
direction"stack" | "inline""stack"옵션 배치