Textfield
Textfield는 사용자로부터 텍스트 입력을 받는 가장 기본적인 UI 요소입니다. 입력 상태, 유효성, 자동완성 여부 등 다양한 상황에 맞게 시각적으로 구분되며, 접근성과 사용성을 고려하여 다양한 상태와 옵션이 제공됩니다.
Textfield
Textfield는 사용자로부터 텍스트 입력을 받는 가장 기본적인 UI 요소입니다. 입력 상태, 유효성, 자동완성 여부 등 다양한 상황에 맞게 시각적으로 구분되며, 접근성과 사용성을 고려하여 다양한 상태와 옵션이 제공됩니다.
Textfield
Textfield는 사용자로부터 텍스트 입력을 받는 가장 기본적인 UI 요소입니다. 입력 상태, 유효성, 자동완성 여부 등 다양한 상황에 맞게 시각적으로 구분되며, 접근성과 사용성을 고려하여 다양한 상태와 옵션이 제공됩니다.
Anatomy
ESSENTIAL
입력 필드
사용자가 텍스트를 입력하는 기본 입력 영역입니다.
OPTIONAL
레이블 텍스트
입력 필드 상단에 위치하며, 입력 항목의 제목 역할을 합니다. 선택적으로 표시할 수 있습니다.
헬퍼 텍스트
입력 필드 아래에 위치하며, 사용자가 올바른 형식으로 입력할 수 있게 보조 정보를 제공합니다.
워드 리밋
최대 입력 가능한 글자 수를 알려주는 영역입니다.
텍스트 버튼
보조 동작(ex. 정보 변경, 인증 요청)을 유도할 수 있습니다.
Anatomy
ESSENTIAL
입력 필드
사용자가 텍스트를 입력하는 기본 입력 영역입니다.
OPTIONAL
레이블 텍스트
입력 필드 상단에 위치하며, 입력 항목의 제목 역할을 합니다. 선택적으로 표시할 수 있습니다.
헬퍼 텍스트
입력 필드 아래에 위치하며, 사용자가 올바른 형식으로 입력할 수 있게 보조 정보를 제공합니다.
워드 리밋
최대 입력 가능한 글자 수를 알려주는 영역입니다.
텍스트 버튼
보조 동작(ex. 정보 변경, 인증 요청)을 유도할 수 있습니다.
Anatomy
ESSENTIAL
입력 필드
사용자가 텍스트를 입력하는 기본 입력 영역입니다.
OPTIONAL
레이블 텍스트
입력 필드 상단에 위치하며, 입력 항목의 제목 역할을 합니다. 선택적으로 표시할 수 있습니다.
헬퍼 텍스트
입력 필드 아래에 위치하며, 사용자가 올바른 형식으로 입력할 수 있게 보조 정보를 제공합니다.
워드 리밋
최대 입력 가능한 글자 수를 알려주는 영역입니다.
텍스트 버튼
보조 동작(ex. 정보 변경, 인증 요청)을 유도할 수 있습니다.
State
Control
variant
default
focused
has value
button
description
Control
variant
default
focused
has value
button
description
Control
variant
default
focused
has value
button
description
Properties
variant | default, auto filled, error, positive |
state | default, hover, disabled |
focused | false, true |
has value | false, true |
label | false, true |
text button | false, true |
icon button | false, true |
word limit | false, true |
helper text | false, true |
background | false, true |
label | false, true |
text | false, true |
Properties
variant | default, auto filled, error, positive |
state | default, hover, disabled |
focused | false, true |
has value | false, true |
label | false, true |
text button | false, true |
icon button | false, true |
word limit | false, true |
helper text | false, true |
background | false, true |
label | false, true |
text | false, true |
Properties
variant | default, auto filled, error, positive |
state | default, hover, disabled |
focused | false, true |
has value | false, true |
label | false, true |
text button | false, true |
icon button | false, true |
word limit | false, true |
helper text | false, true |
background | false, true |
label | false, true |
text | false, true |
Spec
 | Font size모바일에서 자동 화면 확대가 발생하지 않게 |
Spec
Font size
모바일에서 자동 화면 확대가 발생하지 않게 PC와 동일한 사이즈를 사용합니다.
Spec
| Font size모바일에서 자동 화면 확대가 발생하지 않게 |
Usage
Do
여러 인풋을 입력할 때는 레이블 텍스트 사용을 권장합니다.
Don't
에러 상태에는 헬퍼 텍스트로 명확한 피드백을 제공해야 합니다.(색약/색맹 사용자를 고려)
Usage
Do
여러 인풋을 입력할 때는 레이블 텍스트 사용을 권장합니다.
Don't
에러 상태에는 헬퍼 텍스트로 명확한 피드백을 제공해야 합니다.(색약/색맹 사용자를 고려)
Usage
Do
여러 인풋을 입력할 때는 레이블 텍스트 사용을 권장합니다.
Don't
에러 상태에는 헬퍼 텍스트로 명확한 피드백을 제공해야 합니다.(색약/색맹 사용자를 고려)
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us