Text Field Usage

사용자가 인풋을 입력할 수 있도록 필드를 제공합니다. 예상되는 응답이 한 줄 이내로 짧을 경우에 적합합니다.

Layout

Spacing

필드는 텍스트 레이블과 spacing/100 간격을 두고 배치합니다. 필드와 validation message 또는 helper text 와의 간격에는 spacing/50을 적용합니다.

Content

Optional Field

입력 여부가 선택 사항인 경우에는 텍스트 레이블 뒤 (optional) 접미사를 붙입니다. 선택 항목의 경우 입력 값이 비어있어도 form 제출이 가능합니다.

Max Length

입력에 길이 제한이 있는 경우에는 letter count를 제공합니다. 길이 제한을 초과하는 입력이 불가능합니다.

Password Input Type

입력되는 민감한 보안 정보를 화면에 보이지 않게 텍스트 입력을 기호로 대체하여 읽을 수 없게 처리합니다. 사용 편의를 위해 입력 값 표시 옵션을 필드 내 아이콘 버튼으로 제공할 수 있습니다.

Behaviors

Input Validation

입력 내용이 조건을 만족시키지 못 하는 경우 필드가 error state로 표현될 수 있습니다. 이 때, error 타입 validation message를 함께 노출하여 사용자가 상황 맥락을 이해할 수 있도록 합니다.

Overflow Text

입력 텍스트가 보이는 입력 영역보다 길어 내용물이 넘치는 경우, 입력 값은 한 줄로 보여지며 스크롤을 형성하지 않습니다.