Multiline Text Field

Primitive

장문의 텍스트를 여러 줄에 걸쳐 입력할 수 있는 폼 요소입니다.

구조도

  1. Root
  2. Label
  3. Required indicator
  4. Optional indicator
  5. Field
  6. Field text
  7. Placeholder
  8. Cursor
  9. Character count
  10. Max Length
  11. Description
  12. Error message

컴포넌트 미리보기

옵션

Label과 Placeholder

Label과 Placeholder는 Multiline Text Field가 사용자에게 요구하는 항목에 대한 설명을 제공합니다. 명시적 정보 전달을 위해 Label과 Placeholder를 표시하는 것을 권장합니다.

Description

Description을 통해 사용자가 입력해야 하는 내용에 대한 추가 컨텍스트나 도움말을 제공할 수 있습니다. 특정 요구사항이나 힌트 텍스트를 전달합니다.

Error Message

Multiline Text Field의 필수 요구 사항이 충족되지 않았거나, 잘못된 정보를 기입했을 경우 사용자에게 에러 메세지를 전달합니다.

Required or Optional

Required or Optional indicator를 통해 사용자에게 입력값이 필수 또는 선택 사항인지 표시할 수 있습니다. 선택 사항인 경우 '선택' 이라는 힌트 텍스트를 제공하거나, 아예 표시하지 않습니다.

Max Length

Multiline Text Field에 사용자가 입력할 수 있는 최대 글자 수를 표시합니다.

Disabled

Disabled 상태는 Text Field가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.

Read only

Read only 상태는 읽기 전용 옵션입니다. 복사나 드래그는 가능하지만 상호 작용이나 텍스트 입력, 변경은 불가능한 상태입니다.


옵션 테이블

속성기본값설명
labeltext
placeholdertext
max lengthnumber
descriptiontext
error messagetext
required indicatortext
optional indicatortext
is disabledtrue, falsefalsetrue일 경우, Text field가 유저와 상호작용하지 않음
is readonlytrue, falsefalsetrue일 경우, value를 변경할 수 없음
is requiredtrue, falsefalsetrue일 경우, value가 필수임을 나타냄
is invalidtrue, falsefalsetrue일 경우, value가 유효하지 않은 값임을 나타냄

상호작용

터치/마우스 상호작용

마우스 클릭 또는 터치로 Text Field를 동작시킬 수 있는 영역입니다.

Read only일 경우 드래그나 복사는 가능하지만 상호 작용이나 텍스트 입력, 변경은 불가능한 상태입니다.


키보드 상호작용

Focused

Tab키를 통해 focused, enabled 상태로 진입이 가능합니다.

Selected text

이미 작성한 텍스트가 있는 경우, Tab키를 통해 텍스트 selected 상태로 진입 가능합니다.

Overflow

Label의 문구가 텍스트 필드의 Width보다 입력값이 길면 줄바꿈되어 보여집니다.

Description이 Width 공간보다 길면 줄바꿈되어 보여집니다.

개발 현황