Labels

The field wrapper is `.field`. Choose between a wrapped `<label>` and a detached `for`/`id` pair based on the layout.

Use a wrapped label for simple hand-authored forms. The whole label area becomes the click target, there is no id noise, and the markup is harder to break.

Full name

<label class="field">
  <span class="field-label">Full name</span>
  <input class="input" type="text" name="name" autocomplete="name" />
</label>

Use for/id when the layout needs the label and control in different grid areas, when the markup is generated by a backend or form library, or when a single label is paired with multiple controls. .field-label is element-agnostic, so it works on a detached <label>.

Email address We only use this for account notifications.

<div class="field">
  <label class="field-label" for="profile-email">
    Email address <span class="required-mark" aria-hidden="true">*</span>
  </label>
  <input class="input"
         id="profile-email"
         name="email"
         type="email"
         autocomplete="email"
         required
         aria-describedby="profile-email-help" />
  <span class="field-help" id="profile-email-help">
    We only use this for account notifications.
  </span>
</div>

The mixed shape <label for="x">…<input id="x"></label> is allowed by the spec but rarely useful. Prefer either pure wrapped or pure for/id.