Label, control, error — one wrap
Give a field a label and it wraps itself: FieldLabel on top, the error line underneath, the control in one border. No label = the bare element, for when the layout owns the words.
One control, whatever's inside
A quantity stepper, a unit picker, a dialling code — each sits inside its field's single border. The reader sees one control per fact, not a cluster of boxes.
Tick, pick or attach
Checkboxes carry a second line for consequences, radios stay plain, and the file picker tracks its own selection — usable from a server component when it only needs to display.
A narrow voice, a wide answer
Settings and info pages stack these bands: icon + UPPERCASE title + description in a narrow left rail, the fields in the wide right column. Never a title stacked above full-width content.
Filled in, now read it back
What forms collect, tables report — the next chapter is the rows, cards and counters that carry the numbers.