Radio Group

두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.

Anatomy

  1. Root
  2. Label
  3. Radio
  4. Radio Control
  5. Radio Label

Root

States

StateValuesDefault ValueDescription
selectedValuestring, nullnull선택된 Radio의 Value, 없을 시 null

Contexts

ContextValuesDefault ValueDescription
isDisabledtrue, falsefalsetrue일 경우, Radio Group 전체가 유저와 상호작용 하지 않음
isReadonlytrue, falsefalsetrue일 경우, selectedValue를 변경할 수 없음
isRequiredtrue, falsefalsetrue일 경우, selectedValue가 필수임을 나타냄
isInvalidtrue, falsefalsetrue일 경우, selectedValue가 유효하지 않은 값임을 나타냄
orientationhorizontal, verticalvertical키보드로 접근할 때 Radio들의 정렬 방향

Radio

States

StateValuesDefault ValueDescription
isHoveredtrue, falsefalseRadio 영역 내에 포인터가 존재할 시 true로 전환
isFocusedtrue, falsefalseRadio에 Focus가 잡혀있을 때 true로 전환
isPressedtrue, falsefalseRadio 영역을 누르고 있을 때 true로 전환

Contexts

ContextValuesDefault ValueDescription
valuestring
isDisabledtrue, falsefalsetrue일 경우, Radio가 유저와 상호작용하지 않음

Derived States

StateValuesStatementDescription
isDisabledtrue, falseroot.isDisabled || isDisabled
isReadonlytrue, falseroot.isReadonly
isSelectedtrue, falseroot.selectedValue == value

Actions

ActionFromConditionTo
SELECT(radio)-!radio.isDisabled && !radio.isReadonlyroot.selctedValue = radio.value
FOCUS(radio)-!radio.isDisabledradio.isFocused = true
BLUR(radio)-radio.isFocused = false
HOVER_IN(radio)-!radio.isDisabledradio.isHovered = true
HOVER_OUT(radio)-!radio.isDisabledradio.isHovered = false
PRESS_IN(radio)-!radio.isDisabledradio.isPressed = true
PRESS_OUT(radio)-!radio.isDisabledradio.isPressed = false

Triggers

Web

PartEventAction
RadioPointerUpSELECT(radio)
RadioPointerDownPRESS_DOWN(radio)
RadioPointerUpPRESS_UP(radio)
RadioPointerOverHOVER_IN(radio)
RadioPointerLeaveHOVER_OUT(radio)
Radio ControlFocusFOCUS(radio)
Radio ControlBlurBLUR(radio)
Radio ControlKeyUp(Space)SELECT(radio)
Radio ControlKeyDown(Space)PRESS_IN(radio)
Radio ControlKeyUp(Space)PRESS_OUT(radio)

iOS

PartEventAction
RadiotouchUpInsideSELECT(radio)
RadiotouchUpOutsideSELECT(radio)