Switch to latest version

Text Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Interactive demo

Examples

Usability Guidelines

  • 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 label as 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.

  • 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

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number

When not to use

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the text area component.

PreviousText AreaNextTimeline / Passmap

Last updated