👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Text Input Guidelines

Text inputs are fields that users can type free text into. They are used in forms, status updates, search fields, and more.

Applies to:
Text Input
Text Input (Android)
Text Area
Search Box
Search Box (Android)
Date Chooser

Styles

There are many ways to style an input field, but border and underline are the most popular ones.

Border

The classic border text field is what we think of when we create text inputs. This style is perfect for usability and recognizability because it has been used for so many years.

Underline

The more recent underline input field, popularized by Google’s Material Design, is slick and elegant. It is often used in Android apps.


Labels

The label on the text input lets the user know what they have to enter into the field. Make sure your label is legible and understandable.

Label text

Label text should be as short as possible. The longer it takes the user to read the label, the longer it will take them to fill out the form. Add any other details or instructions to the hint or placeholder text rather than the label text.

Standard label

Having the label above the input ensures that it is always visible. This is very important in lengthy forms.

Placeholder label

These text fields look very similar to the standard type, except that they use placeholder text as a label. While this is an excellent solution for space-saving, the usability isn’t great as the label disappears when the user inputs text.

Underline text input label

The underlined label looks like a placeholder until you click it.


Hints

Hint text gives the user an idea of what they should fill in. This is especially important for complicated or long forms.

Hint text

The hint text should help the user fill out the form.

There are 2 main ways to write it:

  • The first is to write out instructions like “Password must contain 8 characters and a number”.
  • The second is to give an example like “E.g., joe@soap.com”.

Since text inputs have a limited length, to keep hint text on a single line, make it as short and to the point as possible.

Hint beneath the input

Placing your hint text beneath the input ensures it is always visible. This is especially important if there is a specific way the user needs to fill in the field.

Placeholder hint text

Placeholder hint text disappears as soon the user starts inputting text into the field. These hints are usually prompts or examples, e.g., "Enter email" or "E.g., joe@soap.com", etc.


States

Text inputs change their state or appearance so that users know what to do. These little visual cues nudge the user in the right direction.

Normal

The normal state is the default when the user hasn’t clicked the input field yet.

Focus

The term "focus state" can refer to various things: the hover state, the state when the user has tabbed to the input, or the state when the user has clicked the field and is inputting text.

Disabled

A disabled text input lets the user know that they can’t enter any text into it. This will usually be because they have to select something else first.


Feedback

Feedback lets the user know that they haven’t filled out the form correctly.

Error feedback

Error feedback can be used to highlight mistakes. These mistakes can include anything, but the most common are:

  • Empty required fields.
  • Wrong password.
  • Invalid email (e.g., when the email doesn’t contain an ‘@’).
  • Wrong email (when the email isn’t in the database).

If the user’s password isn’t strong enough, the interface will have to tell them. It will also have to indicate why it isn’t strong enough and how to make it stronger.

Character limits

A text input could have requirements about how long or short the amount of inputted text must be. Regardless of the amount, you should always let the user know the limit and how much they have entered already.


Best practices

There are a few best practices when it comes to text fields. Overall, you want to make the already laborious task of filling out forms as easy and intuitive as possible.

Width

The width of a text field implies what should go into it. Having a long text field for a short entry (e.g., a zip or pin code) can confuse the user and make them feel like they filled in the wrong thing.

Form structure

Stack your labels on top of the text fields. Although this isn’t as space-efficient, it allows the user to read down instead of reading across, which can be confusing.

For input fields where the label is in the placeholder, it’s hard for the user to tell if they filled the right things in the correct order once they have completed the form. Instead, stick to text fields where the label is visible at all times.

Separate touch targets

Make sure your text inputs are far enough apart, so your user doesn’t click on the wrong one by mistake. Eight pixels is the usual standard gap between touch targets.

Keep consistent input styles

This goes without saying, but you should always keep your styles consistent throughout your wireframes.


Variations

There are many different variations of text fields. Using more specific input styles makes it more apparent to the user what they are expected to type.

Controls included in Balsamiq

Balsamiq offers a wide range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Search box: Use this when you want to allow your user to search through your site’s content.

Text area: The text area input allows the user to fill out long bodies of text. This is ideal for making a post or review. In Balsamiq, you can easily toggle the scrollbar on or off.

DIY Symbols

You can make your own custom text input Symbols in Balsamiq. Creating texting fields with dashes and underscores in the placeholder lets the user know how long the variable they have to input is. This is called masking.

Phone number: Use dashes and underscores to indicate how long a phone number should be. If all your users are from the same area, consider pre-filling the first part of the number.

ID number: Like the phone number input, use dashes and underscores to denote the required number’s length.

Autofill: Autofill is when you type into the text field and the system suggests to the user how they should finish the word or sentence. You can wireframe this by placing the same font-sized text label over the text field.

Password input: By using “*” stars in the input field and a “crossed-out eye” hide icon, you can create a more realistic password input.

Date input: Use this when you need the user to input their birth date, an expiry day or a date that is far away. When the date to be entered is soon (e.g., when booking a holiday or a ticket), pair the date input with a date selector.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.