Intro

I’m no text field master, but I’ve done a fair bit of work with them over the years. I try to be logical in what makes sense and create what’s accessible and straightforward to use.

Seems simple right. Well, it is and it isn’t.

Most of what I talk about is text fields on websites with people using a desktop computer or laptop. I don’t focus on the mobile side of things. Ever tried doing hover on a mobile device 👀.

Let’s get into it.

CONTENTS— 3 PARTS

What’s a text field?
The parts of a text field
The states of a text field

Caveat: This list is not exhaustive but it gets most of what you need to create a solid usable text field.

WHAT’S A TEXT FIELD?

Also known as input box or text box. A text field in this context is an element or section on a website or app that allows someone to enter in letters or numbers.

Is it a text field if you can add numbers to it? Good question.

If you’re booking your wedding online at the Elvis Chapel in Vegas, ordering food from Uber Eats in Miami, or getting your sneakers cleaned by the Sneaker Laundry in Melbourne, you’ll need to fill in some details online to do it.

You’ll be using a text field.

THE PARTS OF THE TEXT FIELD

1. The container

The container is the foundation of the text field.

Don’t bother reinventing the wheel on this.

• Keep the fill colour simple
  I’d advise a white inside fill. Google says otherwise with their grey option, I’m not a fan of the dark grey option with accessibility and font colours etc. People often have a light grey fill that can work well to separate it from a white page background.
• Outline or underline
  I like the outlined option, like my favourite below. It gives a clear and easy touchpoint. The underline (one of the Material Design options) is commonplace for Android, but I‘m not a big fan as the touchpoint isn’t so clear.

• Container line thickness
  1px container line works well for the default state. Keep in mind the focus state works well with a container line thicker than the default.
• Container line colour & accessibility
  Get onto Webaim,punch in the background of the page that the container will be sitting on. Add the colour you want to use for the Container line. See the Graphical Objects section at the bottom. If that fails sack it off and try a new colour. Most sites don't have very accessible container lines. I’ve screwed up on this several times.

• Container corner radius
  Square edges or a small corner radius work. Up to you, but avoid a big arse corner radius as this may not work with some of the elements you might need. Up to 4px corner, radius works pretty well.
• Container touchpoint area
  I go 44px height. I wouldn't go less for web or mobile. Up to 48px works as well.
• Container length
  Some work with the area they have for the length. I like to have containers that suit the element it’s in (such as a modal) plus suit what’s going in the container. Having a long container to put in your age is not ideal. Of course, it can still be usable. But try and work with a container length that works for what’s being inputted.

2. The label

The label is the header of the text field.

• Label or no label
  There are times that this label may not be necessary. I’d say as a rule have one.
• Should I go for a fancy Google Material style label?
  I would keep it simple and go for the label above the container. Material design does it with the placeholder as a label in the container and then it moves to break the line. For me, the out of the box material label is too small when in focus (see below). If the label copy is larger this would work much better for me.
• Bold, semi-bold, medium
  This very much depends on you and your font. My current text labels are at 14px and medium (500) font-weight.

• Label size, colour & accessibility
  Have the label at least 14px in size. Put it through Webaim and make sure the colour works.
• Label length
  Keep it short, up to 4 words is good. There are no rules here, but it is a header that should clarify what the text field is about. Help/hint text can elaborate if needed.

3. Placeholder text

The placeholder lets you know what should be put in the field.

• Not to replace the label
  Some people use the placeholder instead of the label. It saves space, but the placeholder goes away when you tap on the text field. Material Design does it so that you tap on the text field and it moves to the label position breaking the line (as I noted above).
• Placeholder size colour & accessibility
  Put it through Webaim and make sure the colour you have chosen is accessible. I go for a minimum of 16px in font size and in regular (400) font weight.

4. Inputted text

This is the text that you have typed in.

• Darker shade
  Have this in a darker shade than your placeholder text. I use our darkest grey Hex #101828
• Font size
  Font size will match the placeholder text size. I use 16px, regular (400) font-weight.

5. Help/hint text

This is short form copy that gives useful info and context help for the text field.

• Important information
  This is information that is crucial for the text field and is an addition to the label. It’s the label’s helpful sidekick. Help/hint text is essential information for the user to complete the task.
• Text size & colour
  As with all of these elements put them through Webaim and make sure they’re accessible. Help hint text shouldn't be larger than the label text size to keep the hierarchy right. I have it at 14px and a lighter shade than the label with Hex # 475467.
• Error text & disabled sections
  I will show this in the later sections. The help/hint text has a triple use.
  - As help/hint text.
  - As an error text (normally in red) when something is wrong or has not been filled in.
  When a text field is disabled, I use the help/hint text to explain why.

6. Tooltip

Non-essential (but useful) info related to the text field goes into the tooltip. People shouldn't need to read a tooltip to complete their task.

• Size
  There can be several sentences in a tooltip. There’s no rule here. My rule is to keep it to 2–3 sentences.
• Non-essential (but important)
  This is information that’s not essential to completing the task. However, it can elaborate on what’s already there.
• Tooltip icon
  The icon could be information or a question mark icon. No hard rules here but these seem commonplace and widely understood.
• Icon colour
  Make the icon dark enough to be accessible. Again go to Webaim and put your colour through.
• Tooltip colour
  I go black tooltip with white copy. This very much depends on your website colour and dark mode etc. The main thing here is to make it clear to see over the site behind it. So a dark mode site might have a white tooltip and vice versa for a light site with a dark tooltip.
• Copy size
  I’d go for a minimum size of 14px in size. At least in regular 400 font.
• Location of the icon for the tooltip
  I put it after the label. Works well for me.
• Hover or tap
  The tooltip needs to be easily accessible. It should be that you hover and see the tooltip. There are people who have it that you tap the icon and see the tooltip. Both work but the hover is less work.

7. Leading icon

This is an icon at the start of the text field.

• Non-essential but useful
  This is a rare beast and can help in some instances such as an envelope for the email address or a bank card (like above) for adding your credit card details. No need to worry about this too much. I feel it’s a nice to have but a non-essential element in the text field.

8. Trailing icon

This is the icon at the end of a text field.

• More useful than the leading icon
  This area within the text field is a more usable area than the leading icon area. This has some icons that are genuinely useful and important. Viewing and hiding the text like the one above is a good example.
• Other examples
  The calendar one (see below) is a nice little explanatory icon for adding the date. You could also have the voice record microphone icon in the same place.

9. Prefix

This is an element that sits before the text/numbers that are to be inputted.

• Currency
  The currency sign is added first. When the text field has numbers added they start after the dollar sign.
• Alternative option
  You can also add the prefix icon outside of the text field (see below). This works just as well but it’s not my preference.

10. Suffix

• End of the text field
  If you need to add in a percentage or weight in lbs you need to have the numbers first and then the related element after.
• Alternative option
  You can also add the suffice icon outside of the text field. To be honest I have never seen this but it can be done.

11. Character count

This shows when a limited number of characters are allowed in the text field.

• Variations
  There are a few ways this can be done. It can count down to zero which works well. Some show the total number allowed with the number reducing, saying you’ve used 122 of the 200 allowed characters e.g. 122/200.

THE STATES OF A TEXT FIELD

12. Hover state

The hover state indicates to the user that they’re interactive.

• Few options
  There are a few options for a hover on a text field. The cursor should change to show that the text field is clickable and alive. The container of the text field can turn a very light shaded colour. The container can become darker or maybe thicker (see my extreme version above).

13. Focused state

Tap on the text field and it’s focused.

• Few options here
  The way I like it is a bolder and darker container line. Some government websites make the container line darker and thicker. They also add a bold bright outer line to the container line. Below is what the gov.uk website focused text field looks like.

14. Error state

When the text field has an error it needs to be clear to the user.

• Red is the colour
  Red is the standard colour I use. I can’t speak for all cultures but red is the common colour for errors.
• Options
  Some folk make the label red, some make the container line red and some make the help text red. Some do a mix of all three. I go for the container line and help text in red (like in the image above).
• Help text
  It’s really important that the help text states that there’s an error and what can be done to solve it. For example, if it’s a mandatory field it should state that in the error help text.
• Icon with the help text
  If the user doesn’t clearly see red, then it can be smart to have an error icon to clearly show that there’s an error, see below.

15. Disabled/uneditable state

Nice to keep people in the loop on why a text field is disabled.

• Cursor change
  When you hover the cursor may show this small kind of digital no entry sign. This is a nice indication that you can do anything. However, it doesn’t give much explanation of why.
• Options to help people out a bit more
  There are a few things that can be done to help out people when they see a disabled text field. Show them a tooltip when they hover on the text field. This helps explain what’s going on. Or you can add some help copy that is visible upfront. The tooltip’s not shown upfront so that could be a drawback. You can however get more information into a tooltip which could be helpful.

That’s a wrap

Think I’ve overdosed on text fields for a while so this is me signing off. Just remember, text fields are functional elements so don't try and get too fancy with them. Material design went fancy and lost some usability along the way.