Every form state, live, in one place.

Three ways a field announces itself — two allowed, one forbidden. Type into the third and watch the only thing naming the field disappear; that demonstration runs in pure CSS, no script involved.

Two label styles are live in the estate today. One of them becomes the kit’s register; the pick is EC’s, and both stay demonstrated here until it lands (GUIDE.forms.md, Open picks).

Submit the form empty: an error line appears at each field — never one aggregate note under the button — and focus lands on the first invalid field. Fix a field and its line clears alone, the moment you type; the select clears the moment you choose. Errors appear on submit, not while someone is still typing.

Guidance the label can’t carry lives in an always-visible hint under the field — never the placeholder, never a tooltip. Type something and the hint changes state without the layout shifting (its height is reserved); trip the error and the hint survives beneath it, because hint and error are separate lines and aria-describedby carries both.

The attribute set that lets a browser fill the form in one gesture — each control’s live attributes are printed under it. On a phone, the email field raises the email keyboard. Paste an email with stray spaces and leave the field: the spaces go, nothing else is touched.

The widget below is a simulated stub — no challenge script loads on this page. That’s deliberate: a real widget can’t be driven into its never-loaded state on demand, and the distinction is the whole lesson. Drive it: pending holds submit and a click on it names the reason; never loaded runs a grace window and then lets the form through, because the server verifies and a visitor is never trapped client-side. Pass the check and the token is single-use — submitting consumes it.

Fill the email, then click Request access before checking the box: the button is dimmed and aria-disabled, but it never plays dead — the click is intercepted, the consent row flags red, and focus moves to the checkbox, so the form answers the attempt by pointing at the reason. Check it and the button wakes instantly. The whole padded row is the control, and it is never pre-checked.

Success replaces the form — the task is over and the surface says so, rather than leaving a filled form under a toast. The panel carries role="status" so it announces itself, and focus moves onto it so keyboard and screen-reader users arrive with it. Give a first name and the headline addresses you. Reset re-arms the specimen and hands focus back to the first field.

Every piece above in one form, wired by the same script hooks as the specimens — assembled, not designed. Submit it empty to watch all of it fire at once: per-field lines, the consent answer, the held check. Then fill it, complete the check, consent, and go — the confirmation takes the form’s place. This is the shape a new lead form starts from.