Radio Group
두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.
Anatomy#
- Root
- Label
- Radio
- Radio Control
- Radio Label
Root#
States#
| State | Values | Default Value | Description |
| selectedValue | string, null | null | 선택된 Radio의 Value, 없을 시 null |
Contexts#
| Context | Values | Default Value | Description |
| isDisabled | true, false | false | true일 경우, Radio Group 전체가 유저와 상호작용 하지 않음 |
| isReadonly | true, false | false | true일 경우, selectedValue를 변경할 수 없음 |
| isRequired | true, false | false | true일 경우, selectedValue가 필수임을 나타냄 |
| isInvalid | true, false | false | true일 경우, selectedValue가 유효하지 않은 값임을 나타냄 |
| orientation | horizontal, vertical | vertical | 키보드로 접근할 때 Radio들의 정렬 방향 |
Radio#
States#
| State | Values | Default Value | Description |
| isHovered | true, false | false | Radio 영역 내에 포인터가 존재할 시 true로 전환 |
| isFocused | true, false | false | Radio에 Focus가 잡혀있을 때 true로 전환 |
| isPressed | true, false | false | Radio 영역을 누르고 있을 때 true로 전환 |
Contexts#
| Context | Values | Default Value | Description |
| value | string | | |
| isDisabled | true, false | false | true일 경우, Radio가 유저와 상호작용하지 않음 |
Derived States#
| State | Values | Statement | Description |
| isDisabled | true, false | root.isDisabled || isDisabled | |
| isReadonly | true, false | root.isReadonly | |
| isSelected | true, false | root.selectedValue == value | |
Actions#
| Action | From | Condition | To |
| SELECT(radio) | - | !radio.isDisabled && !radio.isReadonly | root.selctedValue = radio.value |
| FOCUS(radio) | - | !radio.isDisabled | radio.isFocused = true |
| BLUR(radio) | - | | radio.isFocused = false |
| HOVER_IN(radio) | - | !radio.isDisabled | radio.isHovered = true |
| HOVER_OUT(radio) | - | !radio.isDisabled | radio.isHovered = false |
| PRESS_IN(radio) | - | !radio.isDisabled | radio.isPressed = true |
| PRESS_OUT(radio) | - | !radio.isDisabled | radio.isPressed = false |
Triggers#
Web#
| Part | Event | Action |
| Radio | PointerUp | SELECT(radio) |
| Radio | PointerDown | PRESS_DOWN(radio) |
| Radio | PointerUp | PRESS_UP(radio) |
| Radio | PointerOver | HOVER_IN(radio) |
| Radio | PointerLeave | HOVER_OUT(radio) |
| Radio Control | Focus | FOCUS(radio) |
| Radio Control | Blur | BLUR(radio) |
| Radio Control | KeyUp(Space) | SELECT(radio) |
| Radio Control | KeyDown(Space) | PRESS_IN(radio) |
| Radio Control | KeyUp(Space) | PRESS_OUT(radio) |
iOS#
| Part | Event | Action |
| Radio | touchUpInside | SELECT(radio) |
| Radio | touchUpOutside | SELECT(radio) |
