Field

<label data-field> stacks a label, a control and a hint. aria-invalid="true" on the control turns the field into an error, and the hint becomes the message.

Basic

<article data-tone="card" style="display:grid;gap:1rem">
  <label data-field><span>Project folder</span><input value="~/code/atlas"><small>atlas reads and writes here.</small></label>
  <label data-field><span>Site URL</span><input value="http://atlas.local" aria-invalid="true"><small>Use https:// so the built pages load everywhere.</small></label>
  <label data-field><span>Note</span><textarea placeholder="Why this page exists"></textarea></label>
</article>

The label wraps the control, so clicking the text focuses the input without an id and a for.

Notes

• aria-invalid="true" colours the border with the stop tone and the hint with --s72-alert.
• The <small> hint drops its uppercase, because it is a sentence rather than a label.
• The pattern holds any control: <input>, <select>, <textarea>, <progress> and <meter> all line up the same way.
• <textarea> starts at 6rem and can only be dragged taller, never wider, so it cannot break the column.