Text Field

텍스트를 입력할 수 있는 폼 요소입니다.

Anatomy

  1. Root
  2. Label
  3. Input
  4. Description
  5. Error message

States

StateValuesDefault Value
valuestring
isFocusedtrue, falsefalse

Contexts

ContextValuesDefault ValueDescription
isDisabledtrue, falsefalsetrue일 경우, Text field가 유저와 상호작용하지 않음
isReadonlytrue, falsefalsetrue일 경우, value를 변경할 수 없음
isRequiredtrue, falsefalsetrue일 경우, value가 필수임을 나타냄
isInvalidtrue, falsefalsetrue일 경우, value가 유효하지 않은 값임을 나타냄
maxLengthnumber, nullnullnull이 아닌 경우, value의 길이는 maxLength를 초과할 수 없음

Actions

ActionFromConditionTo
TOGGLEisSelected = false!isDisabled && !isReadonlyisSelected = true
isSelected = true!isDisabled && !isReadonlyisSelected = false
FOCUSisFocused = false!isDisabledisFocused = true
BLURisFocused = trueisFocused = false
SET_VALUE(value)*value.length <= maxLengthvalue = value

Triggers

PartEventAction
FieldFocusFOCUS
FieldBlurBLUR