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