UI Controls Dictionary > Text Input

Text Input


Text input fields allow keyboard input from the user. They are not as simple as they seem.

They are frequently used in with other types of input controls in a form, but can be used on their own.

When to Use Text Input

Text input fields are used when requesting free-form input from a user, such as a username, phone number, password, or comment. They are one of the main components in a form. They are also frequently used for search, comments and chat.

Here is an example:

Facebook

It is arguably more important to know when not to use them. Following the usability heuristic "recognition rather than recall", if you know in advance the list of possible, valid entries, it is better to use a dropdown menu (combo box) control or other constrained input control to reduce errors and facilitate entry. When asking for a country name, salutation, or payment method, for example.

The U.S. Web Design System suggests using them only when "you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers."


How to Use Text Input

  • Ensure that the length of a text input field comfortably accommodates the length of the expected input.1
  • Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with a clear label, input, and assistive text.2
  • Label text should be aligned with the input line, and always visible.2
  • Label text shouldn’t take up multiple lines.2
  • Placeholder text (also called hint text) can be used inside the input field (see the "Website" field below), but it shouldn't take the place of a label in a form, since it should disappear when the user starts typing. (Also see this note about accessibility of placeholder text.)
  • Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields.3 (Try using Input masks or flexible inputs instead)
  • For longer text, use a text area control (also called multi-line entry field), rather than a single line control.

Basic Usage

States

Variations

References

  1. macOS Human Interface Guidelines
  2. Google Material Design guidelines
  3. U.S. Web Design System


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.