Radio Group
Primitive두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.
구조도
- Root
- Radio
- Radio Control
- Radio Control Icon
- Radio Label
컴포넌트 미리보기
옵션
Size
Radio Group은 small, medium, large 3개의 사이즈를 가질 수 있습니다. medium이 가장 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도를 나눠서 표현해야 할 때만 제한적으로 사용합니다.
Label
Radio는 항상 Label을 가져야 합니다. Label이 설정되지 않은 Radio는 다른 컴포넌트와의 관계가 매우 명확하고, 사용자에게 충분한 맥락을 전달할 수 있을때만 사용합니다.
Selection
Radio는 selected, unselected 중 하나의 상태를 가질 수 있습니다.
Disabled
Disabled 상태는 Radio가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.
옵션 테이블 (Radio Group)
| 속성 | 값 | 기본값 | 설명 |
| size | small, medium, large | medium | |
| is disabled | true, false | false | true일 경우, Radio Group 전체가 유저와 상호작용하지 않음 |
| is readonly | true, false | false | true일 경우, isSelected를 변경할 수 없음 |
| is required | true, false | false | true일 경우, isSelected = true가 필수임을 나타냄 |
| is invalid | true, false | false | true일 경우, isSelected가 유효하지 않은 값임을 나타냄 |
옵션 테이블 (Radio)
| 속성 | 값 | 기본값 | 설명 |
| label | text | ||
| is disabled | true, false | false | true일 경우, Radio가 유저와 상호작용하지 않음 |
상호작용
터치 / 마우스
마우스 클릭 또는 터치로 Radio를 토글할 수 있습니다.
키보드
Focus
tab 키를 통해 Radio로 Focus를 옮길 수 있습니다.
Selected ON/OFF
Focus된 상태에서 space 키를 통해 ON / OFF를 전환할 수 있습니다.
Disabled
포커스 이동 시 Disabled 상태인 Radio는 인식하지 않습니다.
Overflow
Label이 2줄을 초과할 경우 개행 처리하며, Control은 Label 첫 번째 줄에 세로 중앙 정렬합니다.
가이드라인
Working In Progress