Where should the label go on an input field?

Above the field. Top-aligned labels are fastest to scan, survive translation and long strings, and work on narrow screens. A label beside the field costs horizontal room and breaks when the text grows; a label inside the field disappears when somebody types.

Why is placeholder text a bad label?

Because it vanishes the moment somebody starts typing, so they cannot check what the field was asking for. It also disappears from the accessibility tree in some implementations, is usually too low-contrast to read comfortably, and is routinely mistaken for a value that is already filled in.

How wide should an input be?

As wide as the expected content, within reason. Field width is a hint about what is wanted: a three-character field for a country code and a full-width one for an address tell somebody what to expect before they read the label. A 400px box for a two-digit number is a small, constant confusion.

When should an input validate?

When the person leaves the field, not while they type. Validating on each keystroke flags an email as invalid before anyone has finished writing it. Validate on blur, show the message beside the field, and never clear what was typed.

What states does an input field need?

Default, focus, filled, disabled, read-only, error, and — in most B2B products — loading, for fields that validate or look something up on the server. Focus and error are the two most often missing, and both are the ones a person needs most.

Input Field

The control a person types into — the most-used element in most B2B products and the one where small decisions cost the most.

UI Components

An input field is the control a person types into. It is the most-used element in most B2B products and the one where small decisions accumulate the largest cost, because whatever you get wrong is repeated on every form, every day.

Most of what matters is settled rather than debatable. The list below is not a matter of taste.

The decisions that are already settled

Decision	Answer	Why
Label position	Above the field	Fastest to scan, survives translation and narrow screens
Placeholder as label	Never	It disappears exactly when somebody wants to check it
Field width	Matches expected content	The width is a hint about what is wanted
Validation timing	On blur, not per keystroke	Otherwise an unfinished email reads as invalid
Error position	Beside the field	A summary at the top makes people hunt
Required marking	Mark required, not optional	Most fields are required; mark the minority

Placeholder text still has a use: a format hint, alongside a real label. "DD/MM/YYYY" under a date field is helpful. "Date" inside the field instead of a label is not.

States, and the two nobody draws

Default, focus, filled, disabled, read-only, error. In B2B add loading, for any field that checks something on the server.

Focus is the one most often removed. A visible focus ring clashes with a clean design and is the only thing telling a keyboard user where they are. It can be restyled; it cannot be deleted. Browser defaults exist because designers keep taking them away.

Disabled needs a reason. A greyed-out field with no explanation tells somebody they cannot proceed and nothing about why. Either explain the condition nearby or leave it enabled and explain on attempt.

Read-only is not disabled. A value that exists and cannot be changed here should be readable and selectable. Rendering it as disabled makes real data look broken.

What belongs in the field and what does not

Let people paste. Blocking paste on an email or a card number is a security theatre that mostly stops password managers, which are the safer path.

Do not fight the format. Accept a phone number with spaces, a card number with dashes, an IBAN in groups. Strip the formatting yourself rather than rejecting a human's version of the value.

Set the right keyboard. On mobile, a numeric field that opens a full keyboard is a small daily tax, and the fix is one attribute.

Autocomplete is worth the attributes. Address, name and email fields that fill themselves save a genuine amount of typing, and getting this right costs a few characters of markup.

Character limits should count down visibly, and should never silently truncate what somebody pasted.

In B2B, the field is rarely alone

Fields that look things up. Account, project, customer. The moment an input queries a server it needs a loading state, a no-results state, and a decision about what happens when the lookup fails. See dropdown for the selection half of this.

Fields that depend on other fields. A currency that determines a tax field, a country that changes an address format. Each dependency is a state change that has to be visible rather than surprising.

Fields whose value the user does not have. Integration credentials, a tax identifier, a billing contact. These stop a flow completely, and the design answer is to make them optional at that point and ask later rather than to style them better.

Permission-dependent fields. The same form shows different editable fields to an admin and a member, and rendering everything disabled for the member explains nothing.

In practice

A signup form asks for a work email, and validates on every keystroke.

Typing "v" produces "Please enter a valid email address" in red. It stays there, updating, for the entire time somebody types, and clears only when the address is complete. Users described the form as aggressive without being able to say why.

Moving validation to blur removes the effect entirely. The same rule, the same message, applied a second later, and the form stops arguing with people while they are still answering.

The second change is smaller and matters more: on failure, the field keeps what was typed. It had been clearing, which meant a mistyped domain cost the whole address.

Where teams get it wrong

Placeholder instead of a label. Gone the moment it is needed.
Validating per keystroke. The form argues with an unfinished answer.
Clearing the field on error. The most expensive small defect in forms.
Removing the focus ring. Invisible to a mouse user, disabling for everyone else.
Rejecting human formatting. Strip the spaces yourself.
Width that says nothing. A wide box for a short answer is a constant small confusion.

Learn more

UI/UX design for B2B SaaS →