Where to place a label for text field?
Short answer: Top-left corner INSIDE the text field box
Where to put the label text for a text field is a hotly debated topic in UI design. After reading various articles on the topic, I’ve come to conclude that it’s best to place it at the top left corner inside the field box (as shown in the above screenshot of a webapp that I’ve made).
Let me explain why, and also how to code it with CSS.
TL;DR
UI design research suggests:
- The label text inside the field box ensures that the user can easily recognize the box as a text field.
- Placing the label text at the top left corner avoids the text field from looking like the one with a default value already filled in.
To place the label text at the top-left corner inside the field box, style the following boilerplate HTML form code:
<form>
<label for="name-field">
Your name
</label>
<input type="text" id="name-field" />
</form>with these CSS declarations:
form { /* Enable the positioning of label text wherever you want */
position: relative;}label { /* Position label text at the top-left corner of field box */
position: absolute; /* Insert margins between field box border and label text */
left: 0.5rem;
top: 0.5rem;}input { /* Enlarge field box so label text appears at its top-left */
font-size: 3rem; /* Help users recognize text field by rounding its corners */
border-radius: 6px; /* Avoid user's text from overlapping label text */
padding-top: 1.3rem; /* Left-align user's text with label text */
padding-left: calc(0.5rem - 3px);
}
Why top-left and inside the box?
Google’s user tests on text field design
The starting point is the famous user tests on text field design conducted by Google’s design team in 2016–2017 (see Zaraysky et al. 2019 for detail). One of the main conclusions that came out of these user tests was:
“Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance” — Zaraysky et al. (2019)
Famously, this finding has changed the text field design used by Google as part of its Material Design:
And there is another important finding from these user tests:
“Label text should be placed within the bounds of the text field box” — Zaraysky et al. (2019)
Consequently, Google puts the label inside the field box. As demonstrated in the above GIF image, when the user clicks the text field, the label shrinks and moves to the top-left corner — a UI design pattern known as floating label—but still inside the field box.
Problems with the label inside the field box
However, Google’s design met some criticism from UI design experts. Nielsen-Norman Group, a well-known UI design research institute, criticises the floating label pattern (or the label text inside the field box in general):
“… fields with text in them are less noticeable, and users might think there is already a default value entered in the field.” — Sherwin (2014–2018)
For these reasons, they advocate the label outside the field.
Solution: Label at the Top-left inside the field box
How can we come to terms with these two contradicting views on text field design? My solution is: place the label at the top-left inside the field box by default, not only when the text field is active as Material Design does:
The label at the top-left corner does look like a text field (what else can it be?), and it won’t look like a default value already entered in the text field. At the same time, the label is still inside the field box, helping the user recognize the box as a text field to click/tap, according to the user test results by Google.
Now the question is: how can we style a text field like this with CSS?
How to style the top-left label text
Material Design’s website has a demo for its text field design (Google undated). By inspecting this demo with Chrome DevTools, I’ve learned that Google uses the “relatively-absolute positioning” technique to place the label at the top-left inside the field box. Let me explain this step by step.
Step 1: Boilerplate HTML form code
Let’s start with the boilerplate HTML code for a text field:
<form>
<label for="name-field">
Your name
</label>
<input type="text" id="name-field" />
</form>An input element (and its associated label element) should always be wrapped with a form element for accessibility purposes (MDN Contributors 2020).
The above HTML code with the browser’s default styling gives you something like this:
Step 2: Relatively-absolute positioning
The key for placing the label anywhere you want around the text field box is the “relatively-absolute positioning” technique (James 2017):
form {
position: relative;
}label {
position: absolute;
}
This pulls up the label element above the input element, and both elements will be placed at the top-left corner of the form element:
This relatively-absolute positioning technique is very useful in many occasions. The introductory CSS tutorial, however, fails to mention it when it introduces position: absolute even though that’s pretty much the only occasion we actually use position: absolute. I myself learned this technique from James (2017) and since then I’ve used it quite often.
Step 3: Placing the label text at the top left corner
Then you can enlarge the text field with font-size so that the label text appears at the top-left inside the text field box:
form {
position: relative;
}label {
position: absolute;
}input {
font-size: 3rem;
}
Of course, the label should be positioned a bit more inside the field box for legibility. To do so, use the top and left properties for label:
form {
position: relative;
}
label {
left: 0.5rem;
position: absolute;
top: 0.5rem;
}
input {
font-size: 3rem;
}
Step 4: Further styling
Then style the text field as you wish. But I believe that the following three considerations are the minimum requirements.
Border-radius: First, make the field box corners rounded by adding the border-radius property to the input element. Remember that yet another conclusion from Google’s user tests (mentioned above in this article) is:
“Text fields should have rounded corners.” — Zaraysky et al. (2019)
In our particular case, the value of 6px looks nice.
Padding-top: Second, add padding-top to the input element, to avoid the overlapping of the label with the user-entered text. In this particular case, 1.3rem makes the entered text center-aligned vertically between the bottom of the label text and the bottom border of the field box.
Padding-left: Third, add padding-left to the input element, to left-align the label with the user-entered text. Left alignment visually ties the label text with the user-entered text, creating a user experience that it feels like entering what the label text refers to indeed.
Note that the same value as the label element’sleft property does not work for two reasons.
The first reason is that the left property of the label element calculates the distance from the left edge of the form element while the padding-left of the input element measures the distance from the border (which is 2px wide by default with Chrome). So use thecalc() function to subtract 2px (or whatever border width you prefer) from the padding-left value.
The second reason for misalignment is that, since we set the input element’s font-size 3 times larger than the label element, the left-edge of text does not visually align with each other. The larger the text, the more whitespace in front of the first character. So we need to manually adjust the padding-left value. In this particular case, subtracting 1px more will work.
To summarize, we need to subtract 3px in total from the value of the left property.
So we have:
form {
position: relative;
}
label {
left: 0.5rem;
position: absolute;
top: 0.5rem;
}
input {
border-radius: 6px;
font-size: 3rem;
padding-left: calc(0.5rem - 3px);
padding-top: 1.3rem;
}which gives us:
You can see the CodePen demo of this example.
Of course, this text field design can be improved further. But I believe that the above CSS code covers the absolutely minimum requirements for good UI design on text fields.
This article is part of Web Dev Survey from Kyoto, a series of my blog posts on web development. It intends to simulate that the reader is invited to Kyoto, Japan, to attend a web dev conference. So the article ends with a photo of Kyoto in the current season, as if you were sightseeing after the conference was over.
So let me take you to Jingo-ji Temple:
This Buddhist temple, originally built in the early 9th century, is located in the middle of the mountain. Visitors need to walk up the hill quite a bit before arriving the gate pictured above. It seems to me that the magnificent gate symbolizes (and rewards) the efforts you’ve made to reach the temple.
References
Google (undated) “Text fields”, Material Design, undated.
James, Oliver (2017) “Advanced Positioning”, Interneting Is Hard, 2017.
MDN Contributors (2020) “How to structure a web form”, MDN Web Docs, May 20, 2020.
Sherwin (2014–2018) “Placeholders in Form Fields Are Harmful”, Nielsen Norman Group, May 11, 2014 (and updated on Sep. 10, 2018).
Zaraysky, Susanna, Michael Gilbert, Dave Chiu, and Sameer Bansal (2019) “The Evolution of Material Design’s Text Fields”, Google Design, Nov. 1, 2019.
