Label
<div class="field"> <label class="label" for="label-name">Full name</label> <input class="input" id="label-name" placeholder="Ada Lovelace" /></div><label class="label" for="name">Full name</label><input class="input" id="name" />Wrapping the control
Section titled “Wrapping the control”When there is no id to point at, wrap the control instead.
<label class="label"> <input type="checkbox" /> Remember this device</label>With extra content
Section titled “With extra content”The label is a flex row, so a qualifier sits inline.
<div class="field"> <label class="label" for="label-key"> API key <span class="badge badge-outline">Required</span> </label> <input class="input" id="label-key" placeholder="pk_live_…" /></div>Disabled
Section titled “Disabled”A disabled control dims its own label when both sit inside a .field, read from the control’s
state rather than a second attribute to keep in sync.
Contact an owner to change this.
<div class="field"> <label class="label" for="field-locked">Workspace</label> <input class="input" id="field-locked" value="acme" disabled /> <p class="field-description">Contact an owner to change this.</p></div>Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading
direction on their own. See the button page for a live example.
Accessibility
Section titled “Accessibility”- One label per control, and one control per label.
- Clicking the label focuses the control. If that does not happen, the association is broken — that is the quickest way to check it by hand.
- A label is not a heading for a group. That is
<fieldset>and<legend>, which the field covers. - A placeholder is not a label. It disappears as soon as the user types, and it is not announced as a name.