# FormField

A top-aligned label, an input, and help or error text below.

**Consumer provides:** A `<label for>`, the input, and help text; on failure an error that states what is wrong, then how to fix it.

```html
<div class="fdt-field">
  <label class="fdt-label" for="cs">Callsign<span class="req">*</span></label>
  <input id="cs" class="fdt-input" aria-required="true">
  <span class="fdt-help">3 to 12 uppercase characters</span>
</div>
```

- Label Inter 500 13px `fog-100`; required asterisk `steel-300` (not red). Help 12px `steel-300`.
- Input `navy-700` with a `steel-400` border (3:1), `electric-500` + `fdt-glow-xs` on focus.
- Invalid: 2px `hostile` border, message in `hostile-300` with a warning glyph; set `aria-invalid` and `aria-describedby`.
- Validate on blur. Width matches the data; single column, 40ch cap. Never "please."