Input Field
GUIDE
Input Field는 문자, 숫자, 기호 등을 입력하고 편집할 수 있는 입력 컴포넌트 입니다.
텍스트, 비밀번호, 코드 등을 입력할 수 있습니다.
화면 내 특정 섹션에 사용자에게 비교적 간단한 정보 입력을 요청하는 경우 사용합니다.
스크린 전체가 입력 환경으로 전환되는 케이스에는 해당하지 않습니다.
ANATOMY
-
사용자가 입력해야 하는 내용이 무엇인지 표기됩니다.
-
입력 전에는 플레이스 홀더가 노출되며, 입력 중과 입력 후에는 사용자가 입력한 내용을 표기합니다.
-
사용자가 text field에 입력해야 하는 내용의 조건을 표기합니다.
-
* 표기를 통해 필수 입력 정보임을 안내합니다.
-
[현재 입력 중인 글자 수/최대 글자 수]를 실시간으로 노출해 입력 가능한 최대 글자 수 정보를 안내합니다.
-
비밀번호 보안/정확성을 위해 필요에따라 입력키를 그대로 노출/숨기기를 선택할 수 있는 옵션입니다.
-
편집모드로 전환합니다.
-
사용자가 텍스트 편집을 완료하고 누르면 편집 모드가 종료됩니다.
-
입력 중인 내용을 취소하여 다시 active 상태로 돌아갑니다.
-
입력 필드가 활성화된 상태를 나타내는 영역입니다. 상태에 따라 다른 컬러로 변경됩니다.
-
입력 필드를 나타내는 영역입니다. 상태에 따라 다른 컬러로 변경됩니다.
STATES
Input Field의 상태별 정의는 다음과 같습니다.
USAGE
Placeholder usage
Border Box
Underline type
underline type의 경우 글자수 제한이 명확한 컴포넌트이며, 주로 단문 텍스트로 구성되는 정보에 사용됩니다.
제한된 글자수를 초과할 경우 추가 입력이 되지 않고 error 상태로 전환되고, delete로 일부 글자를 제거할 경우 다시 typing이 가능한 상태로 변합니다.입력 필드는 한 줄 구성으로 제한되며, 한 줄 이상의 텍스트가 입력될 경우 이전에 입력된 정보가 좌측으로 밀려나며 일부 텍스트가 보이지 않고 최근 입력한 마지막 텍스트 정보가 커서와 함께 노출됩니다.
기본 길이는 화면 맥락 및 그리드시스템에 따라 디자이너가 설정합니다. 편집이 완료한 active 상태에서 기본 길이를 초과할 경우 [...] 처리되므로 제한된 글자수와 기본 길이 설정에 차이가 많지 않도록 유의합니다.
