Checkbox

최소 1가지 이상의 옵션을 선택 또는 해제할 수 있는 컨트롤입니다.

Anatomy

checkbox primitive anatomy
  1. Root : Checkbox 컴포넌트를 감싸는 컨테이너 영역
  2. Control : Checkbox의 상태를 나타내는 시각 요소
  3. Label : Checkbox에 대한 정보를 전달하는 라벨

States

StateValuesDefault ValueDescription
isSelectedtrue, falsefalseCheckbox가 선택되었을 시 True로 전환
isHoveredtrue, falsefalseCheckbox 영역 내에 포인터가 존재할 시 True로 전환
isFocusedtrue, falsefalseCheckbox에 Focus가 잡혀있을 때 True로 전환
isPressedtrue, falsefalseCheckbox 영역을 누르고 있을 때 True로 전환

Contexts

ContextValuesDefault ValueDescription
isDisabledtrue, falsefalseTrue일 경우, Checkbox가 유저와 상호작용하지 않음
isReadonlytrue, falsefalseTrue일 경우, isSelected를 변경할 수 없음
isIndeterminatetrue, falsefalseTrue일 경우, isSelected를 결정할 수 없음을 나타냄
isRequiredtrue, falsefalseTrue일 경우, isSelected = true가 필수임을 나타냄
isInvalidtrue, falsefalseTrue일 경우, isSelected가 유효하지 않은 값임을 나타냄

Actions

ActionFromConditionTo
TOGGLEisSelected = false!isDisabled && !isReadonlyisSelected = true
isSelected = true!isDisabled && !isReadonlyisSelected = false
FOCUSisFocused = false!isDisabledisFocused = true
BLURisFocused = trueisFocused = true
HOVER_INisHovered = false!isDisabledisHovered = true
HOVER_OUTisHovered = true!isDisabledisHovered = true
PRESS_INisPressed = false!isDisabledisPressed = true
PRESS_OUTisPressed = true!isDisabledisPressed = true
SET_IS_SELECTED(value)*isSelected = value

Triggers

PartEventAction
RootPointerUpTOGGLE
RootPointerOverHOVER_IN
RootPointerDownPRESS_IN
RootPointerUpPRESS_OUT
RootPointerLeaveHOVER_OUT
ControlFocusFOCUS
ControlBlurBLUR
ControlKeyUp(Space)TOGGLE
ControlKeyDown(Space)PRESS_IN
ControlKeyUp(Space)PRESS_OUT