Best practices
Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas text area is for longer, multi-line entries. Form inputs should always (or almost always) be paired with a label. Search fields is an exception.
When to use
- A user needs to input unique information that cannot be predicted and represented by any preset of options.
- A user needs to input a short, single-line piece of information.
When not to use
- If a user should only enter an option from a predefined list, then avoid using a text input as this is likely to result in an error. Consider using a selection control such as a dropdown, select, or radio button group instead.
Anatomy
- Label: Text that clearly indicate the user about the content they need to enter in the field.
- Help icon (optional): Help/info icon for additional help text via a tooltip.
- Input requirement (optional): Indicates if the input field is optional or required for the user to complete.
- Start icon (optional)
- Helper text (optional): Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format or limitations.
- Field value: User entered content.
- Error message
- Placeholder (optional): Optional placeholder text provides hints or examples of what to enter.
- End icon (optional)
Behaviour
Placeholder text disappears after the user begins entering data into the input and should not contain crucial information.
Responsive behaviour
All form fields retain properties across screen sizes.