Form field

Usage

Every Fleetline form control sits inside a form field: a visible label, the control, optional helper text, and an error message when validation fails. The field wires these together with for/id and aria-describedby once, so every control behaves the same.

• Labels are nouns ("Plate number", "Odometer reading"), sentence case, no colon. Placeholders never replace labels.
• Helper text explains format or why we ask ("In kilometres, as shown on the dashboard"). It never repeats the label.
• Errors say what to do: "Enter a reading higher than the last one (84,210 km)". No blame, no "invalid input".
• Required vs optional: in long forms most fields are required, so mark the few optional ones with "(optional)". In short forms mark required fields with * and explain it once above the form.
• Use fieldset to group controls that answer one question: an address, a set of checkboxes, the parts of a date.

Anatomy

1. Field — .field, a grid with a 6px gap
2. Label — label.label[for], with optional .label__required or .label__optional
3. Control — any form control (.input, select, textarea…)
4. Helper text — .field__hint, referenced by aria-describedby
5. Error — .field__error: icon + visually hidden "Error:" + message, referenced by aria-describedby
6. Counter (optional) — .field__counter, updated by js/form-field.js

Examples

<label class="label" for="vin">Vehicle identification number (VIN) <span class="label__required" aria-hidden="true">*</span></label>
<input class="input" id="vin" name="vin" type="text" required>   <!-- required attribute, not only the asterisk -->

<label class="label" for="nickname">Fleet nickname <span class="label__optional">(optional)</span></label>

<div class="field">
  <label class="label" for="odometer">Odometer reading</label>
  <input class="input" id="odometer" name="odometer" inputmode="numeric"
         aria-invalid="true" aria-describedby="odometer-hint odometer-error">
  <p class="field__hint" id="odometer-hint">In kilometres, as shown on the dashboard.</p>
  <p class="field__error" id="odometer-error">
    <svg class="field__error-icon" aria-hidden="true" focusable="false"><use href="#icon-alert-circle"></use></svg>
    <span><span class="sr-only">Error: </span>Enter a reading higher than the last one (84,210 km).</span>
  </p>
</div>

<!-- Counter: js/form-field.js → init(root) -->
<input class="input" id="title" data-counter="title-count" aria-describedby="title-count">
<p class="field__counter" id="title-count" data-max="60">Up to 60 characters</p>

<!-- Horizontal from 48rem -->
<div class="field field--horizontal">…</div>

<fieldset class="fieldset">
  <legend class="fieldset__legend">Depot address</legend>
  <div class="fieldset__body">
    <div class="field">…Street address…</div>
    <div class="field">…Town or city…</div>
    <div class="field" style="--field-max: 12rem">…Postcode…</div>
  </div>
</fieldset>

API

Do and don't

Accessibility

• Name: <label for> gives the control its accessible name and makes the label a click target. Groups get their name from <legend>.
• Description: hint, error and counter ids go in aria-describedby, hint first. Screen readers read them after the name.
• Required: the required attribute is announced; the visual * is aria-hidden and explained once in text.
• Errors are never color alone: border weight changes, an icon appears and the message starts with visually hidden "Error:". Show inline errors after submit or blur, not on every keystroke; on submit, move focus to an error summary.
• Counter: the visible count updates live; a separate polite status region announces it after typing pauses (800ms) so speech isn't flooded. Typing past the limit is allowed and marked invalid.

Tokens