Label

You might say

Put a clear label in front of every field so people know what to enter.

Visible text that tells people what a form control asks forAn Email label on a sign-in form should stay visible and focus its matching input when clicked. Put required, format, and error information nearby instead of relying on placeholder text.

Work email *Used for review notificationsEnter a complete email address

Quick checkChoose the best answer

A registration form only uses Enter a value as placeholder text, so users cannot tell email from username after typing. What should change?

Change the placeholders to Email and Username but still hide them after entryAdd mail and user icons and reveal each field description on hoverKeep a visible label for each field and make label clicks focus the associated input

You can say this to an AI Agent

Add persistent visible labels for username, email, and password and associate each one with its input. Use placeholders only for examples, keep errors and format requirements nearby, and verify that clicking each label focuses the correct field.

Label≠Tag

Label explains what a control needs. Tag marks a content category, status, or filter.

Label≠Form

Label describes one control. Form organizes and submits a set of fields.

When to use it

Every input people fill in
Email *you@example.com
Required or format rules
Email *you@example.com
A clear name for complex controls
Email *you@example.com

When NOT to use it

A placeholder used as the only label
Email *you@example.com
A vague name such as Information or Content
Email *you@example.com
A full help paragraph inside the label
Email *you@example.com

Anatomy

Email*Used to sign in

States what the person should provide

Mark only fields that are actually required

Clicking the label should focus this control

Adds format, purpose, or privacy guidance

Variants

Top

Name

On small screens or for long field names

Left

Name

In a compact desktop filter area

Help text

PasswordAt least 8 characters

When format or purpose needs explanation

Typical use cases

Sign-up form

Profile settings

Display name

Shipping address

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.