Text Field
Text Field
Text Field
Textfield는 사용자로부터 텍스트 입력을 받는 가장 기본적인 UI 요소입니다. 입력 상태, 유효성, 자동완성 여부 등 다양한 상황에 맞게 시각적으로 구분되며, 접근성과 사용성을 고려한 다양한 상태와 옵션이 제공됩니다.
Text Field
Textfield는 사용자로부터 텍스트 입력을 받는 가장 기본적인 UI 요소입니다. 입력 상태, 유효성, 자동완성 여부 등 다양한 상황에 맞게 시각적으로 구분되며, 접근성과 사용성을 고려한 다양한 상태와 옵션이 제공됩니다.
Anatomy
ESSENTIAL
입력 필드
사용자가 텍스트를 입력하는 기본 입력 영역입니다. 포커스, 비활성, 오류 등 상태에 따라 시각적 변화 상태를 제공해야 합니다.
OPTIONAL
레이블 텍스트
입력 필드가 어떤 정보를 요구하는지 설명하는 제목 역할의 텍스트입니다. 입력 필드 상단에 위치하여 사용자가 입력 전 목적을 이해하도록 돕습니다. 폼 전체 맥락상 명확한 경우에는 생략할 수 있습니다.
헬퍼 텍스트
입력 필드 아래에 위치하며, 사용자가 올바른 형식으로 입력할 수 있게 보조 정보를 제공합니다. 입력 규칙, 허용 범위, 예시 등을 안내할 수 있습니다. 오류 메시지와 같은 상태 변화는 색약/색맹 사용자를 고려해 컬러 외에도 명확한 내용을 작성해야 합니다.
워드 리밋
입력 가능한 최대 글자 수 대비 현재 입력된 글자 수를 표시하는 영역입니다. 사용자가 입력 제한을 사전에 인지하도록 도와줍니다.
텍스트 버튼
보조 동작을 제공하는 액션 요소입니다. 입력 흐름을 방해하지 않으면서 추가 행동을 유도합니다. 정보 변경, 인증 요청 등 입력 필드와 기능적으로 연관된 행동만 제공해야 합니다.
Anatomy
ESSENTIAL
입력 필드
사용자가 텍스트를 입력하는 기본 입력 영역입니다. 포커스, 비활성, 오류 등 상태에 따라 시각적 변화 상태를 제공해야 합니다.
OPTIONAL
레이블 텍스트
입력 필드가 어떤 정보를 요구하는지 설명하는 제목 역할의 텍스트입니다. 입력 필드 상단에 위치하여 사용자가 입력 전 목적을 이해하도록 돕습니다. 폼 전체 맥락상 명확한 경우에는 생략할 수 있습니다.
헬퍼 텍스트
입력 필드 아래에 위치하며, 사용자가 올바른 형식으로 입력할 수 있게 보조 정보를 제공합니다. 입력 규칙, 허용 범위, 예시 등을 안내할 수 있습니다. 오류 메시지와 같은 상태 변화는 색약/색맹 사용자를 고려해 컬러 외에도 명확한 내용을 작성해야 합니다.
워드 리밋
입력 가능한 최대 글자 수 대비 현재 입력된 글자 수를 표시하는 영역입니다. 사용자가 입력 제한을 사전에 인지하도록 도와줍니다.
텍스트 버튼
보조 동작을 제공하는 액션 요소입니다. 입력 흐름을 방해하지 않으면서 추가 행동을 유도합니다. 정보 변경, 인증 요청 등 입력 필드와 기능적으로 연관된 행동만 제공해야 합니다.
State
State
State
Properties
Filled | false, true |
Focused | false, true |
Helper Text | false, true |
Right Box | false, true |
Right Box Type | WordLimit, IconButton, TextButton |
Variant | default, error, positive |
State | default, hover, disabled |
Properties
Filled | false, true |
Focused | false, true |
Helper Text | false, true |
Right Box | false, true |
Right Box Type | WordLimit, IconButton, TextButton |
Variant | default, error, positive |
State | default, hover, disabled |
Spec
Font size
모바일에서 자동 화면 확대가 발생하지 않게
PC와 동일한 16px을 사용합니다.
Spec
Font size
모바일에서 자동 화면 확대가 발생하지 않게
PC와 동일한 16px을 사용합니다.
Usage
Do
여러 인풋을 입력할 때는 레이블 텍스트 사용을 권장합니다.
Don't
에러 상태에는 헬퍼 텍스트로 명확한 피드백을 제공해야 합니다. (색약/색맹 사용자를 고려)
Usage
Do
여러 인풋을 입력할 때는 레이블 텍스트 사용을 권장합니다.
Don't
에러 상태에는 헬퍼 텍스트로 명확한 피드백을 제공해야 합니다. (색약/색맹 사용자를 고려)