Text fields
기본적인 텍스트 필드의 구성요소
Text_fields-anatomy.jpeg
- Container
- 사용자가 정보를 입력할 수 있는 인터렉션 영역
- Input text
- 입력된 정보
- Label Text
- 이 텍스트 필드가 어떤 정보를 입력하는지를 나타내는 지표.
- Placeholder text
- input text가 입력되기 전에 사용자들이 정보를 입력할 수 있게끔 임시로 채워져 있는 텍스트 (예를 들면 비밀번호 입력 란에 '비밀번호를 입력하세요'와 같은 palceholder text 가 사용될 수 있습니다). 실제로 사용자가 input text를 채워 넣으면 placeholder text는 사라집니다.
- Helper or Validation text(선택사항)
- 정보 입력에 대한 추가 정보를 제공하거나, 입력한 정보가 기준에 부합하는지와 같은 기준을 제공하기도 합니다. 필수가 아니며 선택적으로 사용됩니다.
- Leading icon(선택사항)
- 입력하는 정보를 뒷받침하는 아이콘입니다. 필수가 아니며 선택적으로 사용됩니다.
- Trailing icon(선택사항)
- 입력된 정보에 대한 부가적인 기능을 담당합니다 (예를 들면 입력된 텍스트를 한 번에 지우기 위한 X아이콘, 비밀번호를 ***에서 텍스트로 보기 위한 눈알 아이콘이 사용될 수 있습니다).