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.
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.
When to use it
- Every input people fill inyou@example.com
- Required or format rulesyou@example.com
- A clear name for complex controlsyou@example.com
When NOT to use it
- A placeholder used as the only labelyou@example.com
- A vague name such as Information or Contentyou@example.com
- A full help paragraph inside the labelyou@example.com
Anatomy
*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
On small screens or for long field names
Left
In a compact desktop filter area
Help text
At least 8 characters
When format or purpose needs explanation
Typical use cases
Sign-up form
Profile settings
Shipping address
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check