Text Field Variations
Basic
To input a single line of text.
With Button
To be used when there is only one input text field to submit.
Text Area
To input longer text which can be two or more lines.
Fix Label
To be used when there is a predefined label in the beginning to give better context to the user.
With help text
Optional text on the bottom of the field, to give more clue what the user should input
Auto Complete
Showing relevant value while the user is writing.
Enter to search
Enable user to press enter to submit rather than adding extra button for submit action
Guideline
• Set text field’s width accordingly with
• Label text:
- Placed above and always left aligned the input area
- Use short and clear text (1-3 words)
- Use sentence case (the first word capitalized, the rest lowercase)
• Placeholder text:
- Use as a clue for what the user should input
- Can use example: (ex: name@mail.com)
- Use sentence case (the first word capitalized, the rest lowercase)
• Help text (optional):
- Help text can be useful as an extra guide for users.
- Use clear and concise informative description
- Keep text short (no more than one line).
- Avoid using too much help text on one form.
• Validate input as soon as users have finished writing on the field (but not during).
• Invalid / error message:
- Use clear and concise informative description.
- Describe what went wrong and how to fix it.
- Don’t blame the user