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.
VB Styling
Vanilla Breeze styles labels as display: block with font-weight: 500 and a small bottom margin (var(--size-xs)). When a label contains a checkbox or radio input, VB auto-detects this via :has() and switches to inline-flex with centered alignment, gap spacing, and a pointer cursor — no classes needed.
Association Methods
Explicit: Using the for Attribute
The recommended method. The label's for attribute matches the input's id.
<label for="name">Full Name</label><input type="text" id="name" />Implicit: Wrapping the Input
The label wraps the input. Useful for checkboxes and radios where text follows the control.
<!-- Text input wrapped --><label> Email Address <input type="email" /></label> <!-- Checkbox wrapped --><label> <input type="checkbox" /> I agree to the terms</label>With Checkboxes and Radios
For checkboxes and radio buttons, wrap the input inside the label. VB auto-detects the contained checkbox or radio via label:has(input[type="checkbox"]) and switches the label to inline-flex with proper alignment and a pointer cursor. No extra classes required.
<!-- 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 at the top of the form.
<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., a search field with a placeholder), hide it visually but keep it accessible with the .visually-hidden utility class.
<label for="search" class="visually-hidden">Search</label><input type="search" id="search" placeholder="Search..." />The .visually-hidden class hides the label from sight while keeping it announced by screen readers.
Accessibility Notes
- Every input needs a label: No exceptions for accessibility
- Use
forattribute: Explicit association is clearer and more robust than wrapping - Labels are clickable: Clicking a label focuses its associated input
- Don't use placeholder as label: Placeholders disappear when typing
- One label per input: A single label cannot serve multiple inputs
- aria-labelledby alternative: Can reference multiple elements for complex labels
CSS Reference
label { display: block; font-weight: 500; margin-block-end: var(--size-xs);} /* Auto-detected checkbox/radio labels */label:has(input[type="checkbox"]),label:has(input[type="radio"]) { display: inline-flex; align-items: center; gap: var(--size-xs); margin-block-end: 0; cursor: pointer;} /* 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
- 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
- form-field - Enhanced form field wrapper