Radio Group
한 그룹에서 하나의 값만 고릅니다.
- 성숙도
- 후보
- 소스 경로
components/ui/radio-group.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
선택지가 적고 모두 한눈에 비교되어야 할 때 씁니다.
사용하지 않을 때
공간이 좁거나 선택지가 많으면 Native Select를 씁니다.
변형과 상태
default고정 예시legend와 모든 선택지 이름을 확인합니다.
selected고정 예시한 번에 하나만 선택되는지 확인합니다.
controlled직접 조작외부 value와 변경 콜백이 일치하는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
disabled고정 예시개별 선택지와 전체 그룹 비활성 상태를 확인합니다.
접근성
fieldset과 보이는 legend, native radio를 유지하며 선택은 바깥 사각형과 안쪽 사각형으로 함께 표시합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
legend | ReactNode | 예 | 선택지 그룹의 보이는 이름입니다. |
name | string | 예 | 모든 radio가 공유하는 폼 이름입니다. |
options | readonly RadioOption[] | 예 | 값, 이름, 설명, 비활성 상태를 담은 선택지입니다. |
onValueChange | (value: string) => void | 아니요 | 선택값이 바뀔 때 호출합니다. |
사용 예시
지원 importimport { RadioGroup } from "@/components/ui/radio-group"
<RadioGroup legend="Language" name="locale" options={options} />