label

Associates a text caption with a form control. Labels are essential for accessibility, enabling screen readers to announce form fields and allowing users to click the label to focus the associated input.

When to Use

  • Every input, select, and textarea needs a label
  • Checkboxes and radio buttons should have labels wrapping them
  • Any form control that requires user identification

Always provide labels. Forms without labels are inaccessible to screen reader users.

Association Methods

Using the for Attribute

The recommended method. The label's for attribute matches the input's id.

Code

<label for="name">Full Name</label> <input type="text" id="name" />

Implicit Association (Wrapping)

The label wraps the input. Useful for checkboxes and radios where text follows the control.

Code

<!-- Text input wrapped --> <label> Email Address <input type="email" /> </label> <!-- Checkbox wrapped --> <label> <input type="checkbox" /> I agree to the terms </label>

Label Placement

Above Input (Default)

Standard placement for text inputs. Easiest to scan.

Beside Input (Horizontal)

For checkboxes, radios, and compact forms.

Left of Input (Grid Layout)

In form.grid layout, labels appear to the left.

With Checkboxes and Radios

For checkboxes and radio buttons, wrap the input inside the label.

Checkboxes

Radio Buttons

Select size

Code

<!-- Checkbox --> <label> <input type="checkbox" name="feature" /> Enable feature </label> <!-- Radio buttons in fieldset --> <fieldset> <legend>Select size</legend> <label> <input type="radio" name="size" value="small" /> Small </label> <label> <input type="radio" name="size" value="large" /> Large </label> </fieldset>

Required Field Indicator

Indicate required fields visually. The asterisk is commonly used but should be explained.

Fields marked with * are required

Code

<p class="help">Fields marked with * are required</p> <label for="name">Name *</label> <input type="text" id="name" required />

Visually Hidden Labels

When a label is not visually needed (e.g., search with a placeholder), hide it visually but keep it accessible.

Code

<label for="search" class="visually-hidden">Search</label> <input type="search" id="search" placeholder="Search..." />

The .visually-hidden class hides the label visually while keeping it accessible to screen readers.

With form-field

Labels work seamlessly with the form-field custom element.

Enter a valid email

Accessibility Notes

  • Every input needs a label: No exceptions for accessibility
  • Use for attribute: Explicit association is clearer and more robust
  • Labels are clickable: Clicking a label focuses its associated input
  • Don't use placeholder as label: Placeholders disappear when typing
  • Multiple inputs per label: Not valid; use one label per input
  • aria-labelledby alternative: Can reference multiple elements for complex labels

CSS Reference

label { display: block; font-weight: 500; margin-block-end: var(--size-xs); } /* Within a .group container */ .group > label { font-weight: 500; font-size: var(--font-size-sm); } /* Visually hidden but accessible */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Related Elements

  • input - Form controls that labels associate with
  • select - Dropdown menus that need labels
  • textarea - Multi-line inputs that need labels
  • fieldset - Groups of labeled controls
  • legend - Label for a fieldset group
  • form-field - Enhanced form field wrapper