- Getting started
- Customise with Sass
Text inputs allow your users to enter letters, numbers and symbols on a single line.
1) Default text input
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.
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.
- 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
- 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.
- 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.
Having troubles with the guide? Please give us more details and we'll get back to you soon.Chat with the team