Columns on purpose
Two columns for short fields that belong together. Everything half-width reads as a table; nothing half-width wastes a third of the screen on a twenty-character name.
Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Whole forms
Three whole compositions - contact, address and a filter bar - carrying the decisions loose fields never show: columns, grouping, validation and where the actions sit.
Contact
The usual short form, with its decisions visible: two columns for the short pair alone, the required fields marked, validation on submit and one filled action.
Address
Fourteen fields that stay navigable because they sit in three groups with legends, and because the widths say which part carries the text: the street takes four columns and the number two.
Filter bar
One line on a desktop, a column on a phone. The labels stay: a bar of four controls identified only by their placeholders becomes unreadable the moment they are filled in.
What becomes a URL
/pedidos
The filter has to go into the URL rather than live in a component’s memory: that is what makes a filtered listing shareable, reloadable and reachable with the back button.
The rules the three follow
Six decisions that show up in any form of the system.
Mark what is required
Mark what is required, not what is optional - unless nearly everything is required, in which case the mark disappears from repetition and the opposite reads better.
Validate on submit
Flagging a field on every keystroke is the commonest way a form turns hostile: a field is marked after the first attempt, never before.
One filled action
The actions at the end, aligned to the end, with one filled button: two filled buttons side by side ask the reader to decide which one is the way forward.
Group with a legend
Each block is a `fieldset` with its `legend`: that is what a screen reader announces before the group, and what keeps a fourteen-field form navigable.
Let the browser help
The right `autocomplete` on each field is what fills a whole address in one tap. It is the cheapest line of accessibility there is.
For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/forms.md