<label> - The Label Element

The `<label>` Element

Form Control HTML 4.0

The label element creates a text description for form controls. It improves accessibility and usability by associating descriptive text with input fields, making forms easier to use for everyone.

Quick Example

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Submit</button>
</form>

Syntax

<!-- Explicit association -->
<label for="field-id">Label text</label>
<input type="text" id="field-id" name="field">

<!-- Implicit association -->
<label>
  Label text
  <input type="text" name="field">
</label>

Labels can be associated with form controls explicitly (using for attribute) or implicitly (by wrapping the control).

Attributes

Core Attributes

Attribute	Description	Example
`for`	ID of the associated form control	`for="email"`

Label Association Methods

Explicit Association (Recommended)

Use the for attribute matching the input’s id:

<form>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName">

<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName">
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName">

<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName">
</form>

Implicit Association

Wrap the input inside the label:

<form>
<label>
  Email Address:
  <input type="email" name="email" required>
</label>

<label>
  Password:
  <input type="password" name="password" required>
</label>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label>
  Email Address:
  <input type="email" name="email" required>
</label>

<label>
  Password:
  <input type="password" name="password" required>
</label>
</form>

Why Use Labels?

Clicking the label text focuses the associated input (and toggles checkboxes/radios):

<form>
<p>Click the label text, not just the checkbox:</p>

<label>
  <input type="checkbox" name="agree">
  I agree to the terms and conditions
</label>

<br><br>

<label for="newsletter">
  <input type="checkbox" id="newsletter" name="newsletter">
  Subscribe to newsletter
</label>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<p>Click the label text, not just the checkbox:</p>

<label>
  <input type="checkbox" name="agree">
  I agree to the terms and conditions
</label>

<br><br>

<label for="newsletter">
  <input type="checkbox" id="newsletter" name="newsletter">
  Subscribe to newsletter
</label>
</form>

Common Use Cases

Text Inputs

<form>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="fullName"
       placeholder="John Doe" required>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
       placeholder="(555) 123-4567">
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="fullName"
       placeholder="John Doe" required>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
       placeholder="(555) 123-4567">
</form>

Checkboxes

<form>
<fieldset>
  <legend>Select Your Interests:</legend>

  <label>
    <input type="checkbox" name="interests" value="sports">
    Sports
  </label>

  <label>
    <input type="checkbox" name="interests" value="music">
    Music
  </label>

  <label>
    <input type="checkbox" name="interests" value="reading">
    Reading
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Select Your Interests:</legend>

  <label>
    <input type="checkbox" name="interests" value="sports">
    Sports
  </label>

  <label>
    <input type="checkbox" name="interests" value="music">
    Music
  </label>

  <label>
    <input type="checkbox" name="interests" value="reading">
    Reading
  </label>
</fieldset>
</form>

Radio Buttons

<form>
<fieldset>
  <legend>Choose Shipping Method:</legend>

  <label>
    <input type="radio" name="shipping" value="standard" required>
    Standard (5-7 days) - Free
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express (2-3 days) - $9.99
  </label>

  <label>
    <input type="radio" name="shipping" value="overnight">
    Overnight - $24.99
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Choose Shipping Method:</legend>

  <label>
    <input type="radio" name="shipping" value="standard" required>
    Standard (5-7 days) - Free
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express (2-3 days) - $9.99
  </label>

  <label>
    <input type="radio" name="shipping" value="overnight">
    Overnight - $24.99
  </label>
</fieldset>
</form>

Select Dropdowns

<form>
<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">Select country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">Select country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
</form>

Textareas

<form>
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4"
          placeholder="Enter your message here..."></textarea>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4"
          placeholder="Enter your message here..."></textarea>
</form>

Required Fields

<form>
<label for="email-req">
  Email Address <span style="color: red;" aria-label="required">*</span>
</label>
<input type="email" id="email-req" name="email" required>

<label for="name-req">
  Full Name <abbr title="required" aria-label="required">*</abbr>
</label>
<input type="text" id="name-req" name="name" required>

<p><small>* Required fields</small></p>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="email-req">
  Email Address <span style="color: red;" aria-label="required">*</span>
</label>
<input type="email" id="email-req" name="email" required>

<label for="name-req">
  Full Name <abbr title="required" aria-label="required">*</abbr>
</label>
<input type="text" id="name-req" name="name" required>

<p><small>* Required fields</small></p>
</form>

Labels with Helper Text

<form>
<label for="username-help">
  Username
  <small style="display: block; font-weight: normal; color: #666;">
    Must be 3-16 characters, letters and numbers only
  </small>
</label>
<input type="text" id="username-help" name="username"
       pattern="[a-zA-Z0-9]{3,16}" required>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="username-help">
  Username
  <small style="display: block; font-weight: normal; color: #666;">
    Must be 3-16 characters, letters and numbers only
  </small>
</label>
<input type="text" id="username-help" name="username"
       pattern="[a-zA-Z0-9]{3,16}" required>
</form>

Multiple Inputs for One Concept

<form>
<fieldset>
  <legend>Credit Card Expiration</legend>

  <label for="exp-month">Month:</label>
  <select id="exp-month" name="expMonth" required>
    <option value="">MM</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <!-- ... -->
    <option value="12">12</option>
  </select>

  <label for="exp-year">Year:</label>
  <select id="exp-year" name="expYear" required>
    <option value="">YYYY</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Credit Card Expiration</legend>

  <label for="exp-month">Month:</label>
  <select id="exp-month" name="expMonth" required>
    <option value="">MM</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <!-- ... -->
    <option value="12">12</option>
  </select>

  <label for="exp-year">Year:</label>
  <select id="exp-year" name="expYear" required>
    <option value="">YYYY</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</fieldset>
</form>

Styling Labels

Basic Label Styling

<style>
.form-field {
  margin-bottom: 15px;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #1f2937;
}

.form-field input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}

.form-field input:focus {
  outline: none;
  border-color: #3b82f6;
}
</style>

<form>
<div class="form-field">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</div>

<div class="form-field">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</div>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.form-field {
  margin-bottom: 15px;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #1f2937;
}

.form-field input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}

.form-field input:focus {
  outline: none;
  border-color: #3b82f6;
}
</style>

<form>
<div class="form-field">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</div>

<div class="form-field">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</div>
</form>

Inline Labels

<style>
.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-form label {
  font-weight: 600;
}

.inline-form input {
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
}
</style>

<form class="inline-form">
<label for="search">Search:</label>
<input type="text" id="search" name="search" placeholder="Enter term...">
<button type="submit">Search</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-form label {
  font-weight: 600;
}

.inline-form input {
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
}
</style>

<form class="inline-form">
<label for="search">Search:</label>
<input type="text" id="search" name="search" placeholder="Enter term...">
<button type="submit">Search</button>
</form>

Floating Labels

<style>
.floating-label {
  position: relative;
  margin-bottom: 20px;
}

.floating-label input {
  width: 100%;
  padding: 16px 12px 6px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}

.floating-label label {
  position: absolute;
  left: 12px;
  top: 16px;
  font-size: 16px;
  color: #6b7280;
  transition: all 0.2s;
  pointer-events: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: 4px;
  font-size: 12px;
  color: #3b82f6;
}
</style>

<form>
<div class="floating-label">
  <input type="text" id="float-name" placeholder=" " required>
  <label for="float-name">Full Name</label>
</div>

<div class="floating-label">
  <input type="email" id="float-email" placeholder=" " required>
  <label for="float-email">Email Address</label>
</div>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.floating-label {
  position: relative;
  margin-bottom: 20px;
}

.floating-label input {
  width: 100%;
  padding: 16px 12px 6px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}

.floating-label label {
  position: absolute;
  left: 12px;
  top: 16px;
  font-size: 16px;
  color: #6b7280;
  transition: all 0.2s;
  pointer-events: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: 4px;
  font-size: 12px;
  color: #3b82f6;
}
</style>

<form>
<div class="floating-label">
  <input type="text" id="float-name" placeholder=" " required>
  <label for="float-name">Full Name</label>
</div>

<div class="floating-label">
  <input type="email" id="float-email" placeholder=" " required>
  <label for="float-email">Email Address</label>
</div>
</form>

Custom Checkbox Labels

<style>
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  margin-right: 8px;
  cursor: pointer;
}

.custom-checkbox:hover {
  color: #3b82f6;
}
</style>

<form>
<label class="custom-checkbox">
  <input type="checkbox" name="option1">
  Accept terms and conditions
</label>

<label class="custom-checkbox">
  <input type="checkbox" name="option2">
  Subscribe to newsletter
</label>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  margin-right: 8px;
  cursor: pointer;
}

.custom-checkbox:hover {
  color: #3b82f6;
}
</style>

<form>
<label class="custom-checkbox">
  <input type="checkbox" name="option1">
  Accept terms and conditions
</label>

<label class="custom-checkbox">
  <input type="checkbox" name="option2">
  Subscribe to newsletter
</label>
</form>

Accessibility

Always Provide Labels

Every form control needs an associated label:

Good
Avoid

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- No label -->
<input type="email" name="email" placeholder="Email">

Use `aria-describedby` for Helper Text

<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
       aria-describedby="password-help" required>
<small id="password-help">
  Must be at least 8 characters with uppercase, lowercase, and numbers
</small>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
       aria-describedby="password-help" required>
<small id="password-help">
  Must be at least 8 characters with uppercase, lowercase, and numbers
</small>
</form>

Error Messages

<form>
<label for="email-err">Email Address:</label>
<input type="email" id="email-err" name="email"
       aria-invalid="true"
       aria-describedby="email-error" required>
<div id="email-error" role="alert" style="color: red;">
  Please enter a valid email address
</div>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="email-err">Email Address:</label>
<input type="email" id="email-err" name="email"
       aria-invalid="true"
       aria-describedby="email-error" required>
<div id="email-error" role="alert" style="color: red;">
  Please enter a valid email address
</div>
</form>

<form>
<fieldset>
  <legend>Contact Information</legend>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">

  <label for="email2">Email:</label>
  <input type="email" id="email2" name="email">
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Contact Information</legend>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">

  <label for="email2">Email:</label>
  <input type="email" id="email2" name="email">
</fieldset>
</form>

Hidden Labels (When Necessary)

If visual design requires hiding labels, keep them accessible to screen readers:

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

<form>
<label for="search-hidden" class="visually-hidden">Search</label>
<input type="search" id="search-hidden" name="q"
       placeholder="Search..." aria-label="Search">
<button type="submit">Search</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

<form>
<label for="search-hidden" class="visually-hidden">Search</label>
<input type="search" id="search-hidden" name="q"
       placeholder="Search..." aria-label="Search">
<button type="submit">Search</button>
</form>

Best Practices

<label for="email">Email:</label>
<label for="phone">Phone Number:</label>

<label for="email">Please enter your email address:</label>
<label for="phone">What is your phone number?</label>

Position Labels Consistently

Good
Inconsistent

<!-- All labels above inputs -->
<label for="name">Name:</label>
<input type="text" id="name">

<label for="email">Email:</label>
<input type="email" id="email">

<!-- Mixed positioning -->
<label for="name">Name:</label>
<input type="text" id="name">

<input type="email" id="email">
<label for="email">Email:</label>

One Label Per Input

Good
Avoid

<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">

<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">

<label for="firstname">First Name / Last Name:</label>
<input type="text" id="firstname" name="firstname">
<input type="text" id="lastname" name="lastname">

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	4+	Full support

The <label> element has been supported since early browser versions and works consistently across all modern browsers.

Form input controls that need labels. Learn more →

Groups related form controls with labels. Learn more →

Provides caption for fieldset groups. Learn more →

<label> - The Label Element

The <label> Element

Quick Example

Syntax

Attributes

Core Attributes

Label Association Methods

Explicit Association (Recommended)

Implicit Association

Why Use Labels?

Common Use Cases

Text Inputs

Checkboxes

Radio Buttons

Select Dropdowns

Textareas

Required Fields

Labels with Helper Text

Multiple Inputs for One Concept

Styling Labels

Basic Label Styling

Inline Labels

Floating Labels

Custom Checkbox Labels

Accessibility

Always Provide Labels

Use aria-describedby for Helper Text

Error Messages

Group Related Inputs

Hidden Labels (When Necessary)

Best Practices

Clear and Concise Text

Position Labels Consistently

One Label Per Input

Browser Support

Related Elements

The `<label>` Element

Use `aria-describedby` for Helper Text