Frontend

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.
Used for review notificationsEnter a complete email address
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
    you@example.com
  • Required or format rules
    you@example.com
  • A clear name for complex controls
    you@example.com

When NOT to use it

  • A placeholder used as the only label
    you@example.com
  • A vague name such as Information or Content
    you@example.com
  • A full help paragraph inside the label
    you@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
Further reading
<label> HTML label elementMDN ↗