UI fundamentals · 7 min read
Friendly text fields
Make typing into forms feel easy: clear labels, smart defaults, and less busywork.
Explained like for kids
A text field is like a blank line in a workbook. If the instructions are missing, too tiny, or make you write the same thing twice, you’ll hate homework. Forms feel the same way.
Examples
Each example has a kid-friendly “why,” then a clear Don't and Do with a real UI mock so you can see the difference.
Labels that stay put
Like for kids: Placeholder text that vanishes when you type is like writing instructions in disappearing ink. Once you start, the hint is gone.
Don’t
Using placeholder text instead of a label
After typing starts, people forget what the field was for. Errors get harder to fix.
Hint disappeared — what was this field again?
Do
Keep a visible label above (or beside) the field
The label stays while you type. Hints can sit above the field if needed.
Email address
We’ll never share your email.
One password field is enough
Like for kids: Typing a secret code twice with dots hiding the letters is a classic trap. Of course the two lines won’t match!
Don’t
“Password” + “Confirm password”
Hidden typing causes mismatches. Extra work for no real safety gain.
Password
Confirm password
Passwords do not match
Do
One password field with a show/hide button
People can peek, fix typos, and move on. Less rage, fewer support tickets.
Password
Peek to check typos, then hide again
Flexible login
Like for kids: You might forget a weird username, but you usually remember your email or phone number.
Don’t
Username only to log in
People juggle many usernames. Forcing one raises cognitive load.
Username
Password
Do
Accept email or phone (or username)
Meet people where their memory already works.
Email, phone, or username
Password
Field width matches the answer
Like for kids: A tiny box for a long story feels wrong. A huge box for a 2-digit age feels silly too.
Don’t
Every field the same full width
Wrong width hints at the wrong answer length and looks messy.
Age
ZIP / postal code
Street address
Do
Short fields for short answers, wider for longer ones
Visual size quietly tells people what belongs there.
Age
ZIP / postal code
Street address
Remember these
- Always show a real label — never rely on disappearing placeholder text alone.
- Don’t make people type the same password twice; let them show/hide it.
- Match field width to what people will type (short for ZIP, long for address).
- Allow login with email or phone — usernames are easy to forget.
Inspired by Dos and Don’ts for Form Input text-field rules and Practical UI form guidelines. Rewritten in plain language for learning — not a reprint of the originals.