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:
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.
How to in Balsamiq To switch between border and underline in Balsamiq, simply click on the toggle button to change the style.
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.
Tip When making underline text inputs, mimic the material design input by moving the label up when the user starts inputting their information.
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.
How to in Balsamiq In Balsamiq, simply put a hyphen before and after the text to make it appear like placeholder text.
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.
How to in Balsamiq Easily change the text input’s state by selecting an option in the State dropdown.
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.
Tip When designing error feedback, always show the error using color (red), hint text, and an icon (cross). The icon’s addition makes it much more visible for users who have visual color impairments to spot the failed text input.
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.
Tip For accessibility reasons, some users prefer to have the text written out.
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.
Jargon: Fat Finger Syndrome When UI controls are too small and too close together on a touch screen, sometimes users inadvertently tap the wrong button or link by mistake, which they blame on their “fat fingers”.
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.
Note: You can download the Symbols shown above by searching "UI Controls Examples" in Quick Add.
By Tess GaddGot questions or feedback? Email learn@balsamiq.com.