Text input
텍스트 입력(text input)은 한 줄의 짧은 텍스트를 입력하는 경우에 사용되는 요소입니다.
Type
Helper text here
Default
Helper text here
Left label
Anatomy
- Label(선택)
- Value(or Placeholder)
- Suffix
- Prefix
- Container : 입력 상태에 따라 border, bg color 변경
- Helper text(선택) : text 입력에 참고할 text 입력
State
Text input 상태는 Default / Complete / Focus / Error / Disable 5가지로 사용합니다.
Focus 상태일 때, border color는 해당 솔루션의 primary color를 사용합니다.
Focus 상태일 때, border color는 해당 솔루션의 primary color를 사용합니다.
Select
Default
Complete
Focus
Error
Disabled
Size
Select
large (40px)
medium (36px)
small (30px)
Prefix / Suffix
Prefix와 Suffix에는 텍스트와 버튼을 사용할 수 있습니다. 입력하는 내용과 컨텍스트에 따라 올바른 맥락으로 사용해야 합니다.
사용 가이드
사용 관련
Don’t
텍스트 필드에 임의로 색상을 적용하지 않도록 주의합니다.
Don’t
placeholder를 label처럼 사용하지 않습니다.
오류 메시지
input의 오류 메세지를 팝업으로 표출하지 않습니다. helper text 영역에 표출합니다.
Do
Don’t