Text inputs allow your users to enter letters, numbers and symbols on a single line.
1) Default text input
This is a example of hint text
2) Error Messaging
Use error messaging that is clear and concise.
The error message should tell users what went wrong and/or how to rectify it.
The error message should be in between the text input label and the text input field.
If you have hint text, it should be in between the error message and the text input field.
This is a example of hint textThis email is invalid
3) Success Messaging
Success messaging should be used when you require inline validation.
It can be used with or without the hint text.
If hint text is used, it should clearly state what
the user needs to enter into the field.
This is a example of hint textThis email is valid
Use the appropriate field length for the input
Length provides the users with an idea of how much text to input
E.g. a postal code text input should only be 6 numbers long
Avoid using placeholder text inside of the text field
This ensures that the hint text is available, and users can review their answers if need be.
Clear labelling would also help users to understand better what to input.
We recommend that you avoid placeholder text as it disappears when users start typing.
If hint text is used, give examples to show users how you’ll like
them to enter their answers or how you will be using their information
E.g. for emails, a useful hint text would be
"We will only use your email for receipts." or specify the date format
When to use
Text inputs should be used:
When you need users to enter text that is only a single line.
The label of the text input should clearly indicate what the user needs to key in
Text inputs should not be used:
When you require users to enter text and/or long answers that span multiple lines.
Using the text area component would be more appropriate
When you require users to select from a predetermined list.