Radio
KRDS 기반의 라디오 버튼 컴포넌트입니다. 여러 옵션 중 하나만 선택할 수 있는 단일 선택에 사용되며 FormField와 통합되어 폼 검증 및 접근성을 제공합니다.
개요
설치
사용법
RadioGroup과 Radio 컴포넌트를 사용하여 단일 선택 옵션을 구현합니다.
예제
기본 사용
RadioGroup과 Radio 컴포넌트를 사용한 기본 예제입니다.
선택된 값: option1
RadioGroupItem (커스텀 라벨)
더 복잡한 라벨이나 커스텀 스타일이 필요한 경우 RadioGroupItem을 직접 사용할 수 있습니다.
Size
sm (16px), md (20px), lg (24px) 3가지 크기를 지원합니다.
Small (sm)
Medium (md) - 기본값
Large (lg)
Orientation
orientation prop으로 가로(기본값) 또는 세로 배치를 선택할 수 있습니다.
Horizontal (기본값)
Vertical
상태 (Status)
status prop으로 에러 상태를 표시할 수 있습니다.
FormField 통합
FormField와 함께 사용하면 자동으로 접근성 속성이 연결되며 폼 검증을 쉽게 구현할 수 있습니다.
서비스 이용 통계에 활용됩니다
구독 플랜을 선택해주세요
사용 가이드
라디오 버튼을 사용하는 경우
- 상호 배타적인 옵션 중 하나 선택
- 2~7개 사이의 옵션
- 모든 옵션을 한눈에 보여줄 때
- 옵션 간 비교가 필요한 경우
- 기본값이 있는 단일 선택
라디오 버튼을 사용하지 않는 경우
- 다중 선택이 필요한 경우 (Checkbox 사용)
- 옵션이 7개 이상인 경우 (Select 사용)
- 예/아니오만 있는 경우 (Switch 고려)
- 옵션이 동적으로 변하는 경우
Checkbox vs Radio
Checkbox와 Radio의 차이점을 이해하고 적절히 사용하세요.
| 구분 | Checkbox | Radio |
|---|---|---|
| 선택 방식 | 다중 선택 가능 | 단일 선택만 가능 |
| 선택 해제 | 개별 해제 가능 | 다른 옵션 선택으로만 변경 |
| 기본 상태 | 선택 안 됨이 가능 | 보통 하나가 선택됨 |
| 사용 예 | 관심사 선택, 동의 항목 | 성별, 결제 방법, 플랜 선택 |
접근성
WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.
키보드 지원
| 키 | 동작 |
|---|---|
Tab | 라디오 그룹으로 포커스 이동 |
↑ / ↓ | 수직 그룹에서 이전/다음 옵션 선택 |
← / → | 수평 그룹에서 이전/다음 옵션 선택 |
Space | 현재 포커스된 옵션 선택 |
스크린 리더 지원
- 라디오 그룹의 역할과 현재 선택된 옵션 안내
FormField와 함께 사용 시 label, error, helperText 자동 연결- 필수 필드 여부를
aria-required로 전달 - 에러 상태를
aria-invalid로 전달
ARIA 속성
role="radiogroup": 라디오 그룹 역할 명시role="radio": 개별 라디오 버튼 역할aria-checked: 선택 상태 전달aria-invalid: 에러 상태 전달aria-describedby: helper text, error 메시지 연결