Field

The labeled field wrapper. Mono, uppercase, tracked label — the same catalog-label convention as Badge and type-label — with an optional hint.

Basic

Field is a <label> that wraps its caption text together with the control — association is native, no for/id pair to keep in sync. A <label> plays three different roles in this system (this wrapper, Checkbox/Radio’s row, Switch’s row), so it cannot be styled bare without one leaking into another; .field is the one of the three with no distinguishing attribute, so it is the one that keeps a class. Hint text is a native <small>.

<label class="field" style="max-width: 20rem;">
  Name
  <input type="text" placeholder="Call Mom" />
  <small>First line becomes the display name.</small>
</label>

Holding any control

Field wraps Input, Select, or anything else — it only owns the caption and the hint line, never the control’s own styling.

<label class="field" style="max-width: 20rem;">
  Unit
  <select>
    <option>Day</option>
    <option selected="">Week</option>
    <option>Month</option>
    <option>Year</option>
  </select>
</label>

In a row

.form-row is a sanctioned class for the one shape here with no element of its own — a row grouping two fields side by side.

<form style="max-width: none;">
  <div class="form-row">
    <label class="field">
      Every
      <input type="number" placeholder="2" />
    </label>
    <label class="field">
      Unit
      <select>
        <option>Day</option><option selected="">Week</option><option>Month</option>
      </select>
    </label>
  </div>
</form>

API