Text fields in UI Design: 7 Common Styles

Text field is one of the most popular UI elements. Despite its a relatively simple object, it can have different styles. The style of the text field can vary depending on the data it collects and the context in which it is used. In this article, I will review seven popular types of text fields.


1. Standard text field

Standard text field is a text field that can be found in almost all digital products.

Standard text field with a label to the left and on top of the input container.

When to use:

A standard input field can be used for various types of data.

Tips:

  • Use the conventional design of the input field. A traditional design is a rectangular box with a label on the top or left. It’s better to avoid line-only design (popularized by Material Design) because it negatively impacts discoverability.
Line-only input field vs. conventional input box. 
  • Support different states. You need to design to support all the states. The input field can be in the Enabled, Hover (for desktop), Focussed, and Disabled state.
Enabled, Focused and Disabled states for the input field.
  • Never hide input labels. Input labels should always be visible to the user all the time. Don’t hide it when the input field becomes focussed because it will make UI less usable (users will have to memorize the labels when they fill out the form). If you want to save screen space without scarfing usability, you should use Floating Labels.
Input field hides label on focus vs. Label stays on top of the field on focus.
How to design Floating Label in Figma
  • Use placeholder text to give the user a hint about the data they need to provide. For example, if you ask the user to provide a tracking number, you can add a placeholder with an example of a tracking number).
Dummy placeholder text vs. useful placeholder text.
  • Add a visual outline when the input field is active. Users rely on visual indicators like a blinking cursor to understand where they are in the form. It’s possible to make user’s life easier by using additional visual indicators. For example, when the input field is active, a contrasting outline can help users find the currently selected field much faster.
No visual outline vs. contrasting visual outline.
  • Use the size of the field as a hint. The size of the text field can give users a clue about the length of the desired input. For example, if you know that the ZIP has a maximum of six characters, there is no need to make this field too large.
Too large vs. properly sized input field.
  • Add a help icon (“?” or “i”) next to the field to help the user enter the data. A tooltip with helpful information becomes visible when the user hovers over the icon. This feature will be helpful when you want to provide a quick guide on data input ( i.e., you ask the user to provide social security number, but they might know where to find it) or when you collect personal information (i.e., you ask the user to provide a phone number, and want to explain how you will use it).
Help icon with a tooltip with additional information.

2. Text field for passwords

The key difference for this input field type is that the input data is hidden. Users see stars instead of the characters they type.

Password field. 

When to use

For passwords, security codes.

Tips:

  • Always offer Show/Hide functionality. The user should be able to click on the eye icon or “Show” label to see what they’ve typed and validate their input.
Show-hide password option.
  • Don’t use the “Confirm password” field. If you offer the show/hide functionality, there is no need to ask a user to type the password twice.

3. Text field with separated sections

This text field makes users break the data they want to provide into a few separate sections. A typical example can be a date of birth with a specific section for the day, month, and year or a phone number with a separate section for the area code. This input field type strictly dictates what format users have to use for each section.

Text field with separated sections

When to use:

While this type of input field can help you avoid data formatting issues, it is better to avoid using it because it forces users to make additional actions (use the Tab button to navigate between sections). Most of the time, it is better to rely on auto-formatting.


4. Text field with auto-formatting

As the user types data, it auto-formatted in the field. A typical example of such a field is a phone number or credit card number.

Phone Number field with auto-formatting. Image: Josh Morony

When to use

Auto-formatting makes it easier for users to validate the provided information. For example, when it comes to phone numbers, it’s much easier to validate groups of numbers rather than the full number.

Auto-formatting also can guide the user during the data input and help them avoid mistakes. For example, once you start typing a ZIP code, you see that you need to provide six digits.


5. Text field with auto-suggesting

Once the user starts typing, the field opens a list of options that are expected to match user criteria.

Text field with auto-suggesting 

When to use:

Text fields with auto-suggesting can work well for search functionality. When you want to narrow down the list of options that the user wants to search for, you can use this field.

It also can work well when the user provides a shipping address. Once the user starts to type the address, the input field can suggest the option.

Tips:

  • Design a typo-friendly auto-suggestion mechanism. Users will make mistakes while providing input and can be easily frustrated if the system offers zero suggestions.
  • Use different font styles for the part provided by the user and the part suggested by the system. Users should always be able to distinguish their input.
An auto-suggestion mechanism is used on the Amazon website.

6. Text field that supports voice input

The microphone icon indicates that the user can enter data using voice.

Text field with voice input

When to use:

There are two main reasons why you might want to use this:

  • Voice input can be a more convenient way of data entry for mobile users. Typing is less comfortable and more error-prone on mobile devices than on a desktop, so offering voice input might help mobile users.
  • Voice input can be good for visually impaired users. People who cannot type might want to use voice for data input.

Tip:

Don’t make the mic icon a part of the input field; instead, add it next to the field. It will help you use the larger icon and make the interaction more comfortable for users (it’s easier to click/tap large targets).

Microphone icon that activates voice input inside the input field vs outside.

7. Text area

Text area is a multi-line text input for long texts.

Text area

When to use:

Use this field when you want to collect two or more lines of text (a line of text typically has around 60 characters).

Tips:

  • The size of the text area should change dynamically, adapting to the user input.
Text area changes dynamically
  • If you have a character limit, show it at the bottom right corner of the input container.
Character limit for text area