Radio
Radio(라디오) 위젯은 여러 선택지 중 하나만 고를 수 있는 단일 선택 버튼입니다.
같은 그룹에 속한 라디오 중 하나를 선택하면 나머지는 자동으로 해제됩니다.
정의 / 역할
Radio 위젯은 하나의 그룹(groupId) 안에서 단 하나의 값만 선택되도록 하는 원형 선택 버튼을 그려줍니다. 같은 groupId를 가진 라디오들이 하나의 선택 그룹을 이루며, 사용자가 하나를 선택하면 그룹 값(groupValue)이 그 라디오의 value로 바뀌고 나머지는 해제됩니다.
- 카테고리: Contents
- 기본 그룹 값: 없음(빈 문자열)
기능
| 기능 | 설명 |
|---|---|
| 단일 선택 | 같은 groupId 그룹 안에서 값 하나만 선택됩니다. 다른 라디오를 선택하면 이전 선택은 자동으로 해제됩니다. |
| 그룹 관리 | groupId로 라디오들을 하나의 그룹으로 묶고, groupValue로 현재 선택된 값을 공유합니다. |
| 선택 해제 | toggleable를 켜면 이미 선택된 라디오를 다시 눌러 선택을 해제할 수 있습니다. |
| 선택 시 동작 | 선택이 바뀌면 onTap에 연결한 동작(로직·스크립트)이 실행됩니다. |
| 색·포커스 | 선택색(activeColor)·포커스색(focusColor)·마우스 오버색(hoverColor)과 자동 포커스를 설정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- Radio 항목을 캔버스로 끌어다 놓습니다.
- 하나의 그룹으로 묶을 라디오들에 오른쪽 속성 패널에서 동일한
groupId를 지정합니다. - 각 라디오의
value에 서로 다른 값을 지정합니다. - 필요하면
onTap에 선택 시 실행할 동작을 연결하고, 선택색 등 모양을 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
groupId | 라디오 그룹 식별자. 같은 값을 가진 라디오들이 하나의 선택 그룹을 이룹니다. | 빈 문자열 | 문자열 |
value | 이 라디오의 값. 선택되면 그룹 값이 이 값으로 설정됩니다. | 빈 문자열 | 문자열 |
groupValue | 그룹의 현재 선택된 값. 이 값이 value와 같으면 선택 상태로 표시됩니다. | 빈 문자열 | 문자열 |
toggleable | 이미 선택된 라디오를 다시 눌러 선택 해제할 수 있는지 여부 | 꺼짐(false) | 참 / 거짓 |
activeColor | 선택되었을 때의 색 | 미지정 | 색상 |
focusColor | 포커스 상태일 때의 색 | 미지정 | 색상 |
hoverColor | 마우스를 올렸을 때의 색 | 미지정 | 색상 |
materialTapTargetSize | 탭 대상 영역 크기 | 미지정 | padded, shrinkWrap |
visualDensity | 시각 밀도(구성 요소 간격의 조밀도) | -4, -4(조밀) | 시각 밀도 값 |
focusNode | 포커스 노드 | 미지정 | 포커스 노드 |
autofocus | 화면 진입 시 자동으로 포커스할지 여부 | 꺼짐(false) | 참 / 거짓 |
주의 / 팁
경고
같은 그룹으로 묶으려면 라디오들의 groupId를 동일하게 지정해야 합니다. groupId가 다르면 서로 독립된 그룹으로 동작해 여러 개가 동시에 선택될 수 있습니다.
팁
같은 그룹 안에서는 각 라디오의 value를 서로 다르게 지정해야 선택이 구분됩니다. toggleable를 켜면 선택된 항목을 다시 눌러 해제할 수 있습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Radio (라디오) Widget Control 문서에서 확인하세요.