3. Text input

Text input 을 통해 시스템 상에 데이터를 입력할 수 있습니다.

Usage

1. Label Text

text field에 어떤 정보를 입력해야할지 알려주는데 사용됩니다. 때문에, label text는 분명하고 명확하게 표현되어야합니다. 불필요하게 문장이나 결합된 단어의 사용 지양합니다. 필수로 입력해야하는 항목은 구별되게 표시하여 사용하고, 선택적으로 입력해야하는 항목은 '선택' 표시로 구분하여 표기합니다.

2. Placeholder Label (Hint)

input field에 대한 짧은 설명 또는 예시를 제공할 때, input field 안에 placeholder 로 입력합니다.

<textfield_standard>

<textfield_placeholder label>

<textfield_combind>

일반적으로 입력필드에는 label text와 placeholder 둘 중 한가지만을 사용합니다.전문적이거나 복잡한 시스템을 사용하는 B2B 서비스의 경우 label text와 placeholder를 혼합하여 사용하도록 합니다. 단, placeholder에는 label text와 중복되는 단어를 사용하지 않아야하며, 시스템에서 필요로하는 data를 예시로 작성하여 입력시 참고할 수 있도록 합니다.

3. Helper/prompt Text

input field에 대한 도움말을 표기합니다. 문장을 실용적이고 간결하게 표현합니다.

4. Feedback text

error text, validation을 포함합니다. (자세한 내용은 Error message참고) helper / prompt text와 혼합하여 사용하지 않습니다.

5. Tooltip

Input field에 대한 복잡한 내용을 설명하고자 할 때, 아이콘과 함께 결합하여 사용합니다. 특정 정보를 요청하는 폼인 경우, 그 정보를 찾는 방법 또는 작성하는 방법을 입력 필드 옆에 명확하게 설명 (텍스트 or 이미지)하여 불확실성을 줄이고 업무 효율을 높일 수 있도록 합니다. 가능한 짧고 간단하지만, 필요한 정보를 충분히 이해할 수 있도록 작성합니다.

[Reference]