본문으로 건너뛰기

RadioGroup

여러 항목 중 하나만 고르는 선택 그룹.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

콘텐츠 보기

ListSee records in time order.GridSee many projects at a glance.Compact · coming later

label

hint

error

requireddisabled

variant

defaultValue

이렇게 · 이렇게 하지 않기

이렇게 선택지를 모두 보여줘야 비교가 쉬울 때 쓴다. 그룹에는 legend로 질문을 단다. 누르는 즉시 적용되는 설정이면 SegmentedControl이나 Switch를 쓴다.
이렇게 선택지가 2–5개이고 서로 비교해야 할 때. 더 많으면 Select.
이렇게 하지 않기 메뉴(role=menu)로 값을 고르게 하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`콘텐츠 보기`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`options`	`readonly { value, label, description?, disabled? }[]`	—	2–5개. 설명은 항목의 aria-describedby. 미리보기는 표본 3개(하나 disabled).
`variant?`	`'list' \| 'card'`	`list`	list = 점 + 행, card = 하나의 카드 안에서 구분선으로 나눈 행(OptionCard와 같은 구현).
`defaultValue?`	`string`	`list`	비제어 초기값. 비우면 선택 없음. 제어하려면 value + onValueChange.
`value?: string · onValueChange?: (value: string) => void`	—	—	제어 모드.
`name?: string`	—	—	폼 제출 이름. 없으면 자동 생성.