# Form
A form that validates with the browser's own constraints (`required`, `type="email"`, `pattern`) and shows server errors on the matching fields. Pass `errors` straight from your action; each message lands on the field with that `name`, and focus moves to the first field with an error. Bind an accepted action answer with the framework-free `formErrors` constructor in `@/lib/ouro/form-answer`. Server errors only show: unlike the browser's checks they never block the next submit, so the user can always send the form again. A Form submits only itself: its submit event stops there, so a Form in a sheet inside another Form never submits the outer one. It renders a `
// The action answers { errors: { general, email } }: map its keys to this form's field names.
const errors = actionData?.errors;
}>
```
## Usage
A submit is checked in this order. First the browser's own checks (`required`, `type="email"`, `pattern`): a failure stops the submit, marks each failing field with the browser's message and moves focus to the first. Then your `onSubmit`, which runs only when those pass and can still call `event.preventDefault()`. Then the server, whose answer comes back as `errors`.
The keys of `errors` are your fields' `name`s, and `form` is the message about the whole form. An action that answers with other keys is mapped where you pass them: `errors={formErrors(data, { form: data?.errors?.general, email: data?.errors?.email })}`. A key that no field in this form is named shows at the top of the form and warns in development with the key, this form's field names and the fix; with two forms on one route, pass each only its own keys.
`formErrors(answer, messages)` separates arrival from presentation. Same accepted answer: the clear mask persists, even through empty/omitted maps or a temporarily absent answer, and the latest uncleared messages render without new focus or a forced alert replacement. New accepted answer: reset the mask and create one arrival, even when messages are equal. Cached/reused answers require `{ key: acceptedAnswerKey }`, advanced only on actual acceptance. Form never guesses arrival from submit start, waits or framework navigation. The caller chooses accepted, form-local data: to give two Forms on one route answers of their own, pass each its own source.
Plain `errors={{ email: "Taken." }}` remains compatible and content-only: equal raw maps cannot prove a new answer. Use the constructor from the initial render for action answers; switching representations seeds a baseline and preserves clears rather than inventing arrival. Opaque identity does not survive JSON, spread, structured cloning or server component transport. Reconstruct beside Form in each environment with the locally accepted object or a safe explicit acceptance key; the returned value never retains or serializes the unselected source payload. Changed text in an existing alert may still produce ordinary live-region speech, but presentation is not a new answer generation.
The message about the whole form is an alert (`role="alert"`). It is in the page only while there is a message, and each answer adds a new one with its text already in it, which is what screen readers announce; `getByRole("alert")` finds nothing on a form without one. A field's message is not an alert: it is that control's description, so assert it with `toHaveAccessibleDescription`.
Focus moves to the first field with an error when errors arrive after a submit. A page that loads with `errors` already set (a post without JavaScript, or a reload) shows them in the server HTML and moves no focus: nothing was submitted from this page, and taking focus on load would drop a keyboard or screen-reader user into the middle of a page they have not read. To send them to the errors on load, put an in-page link to the form in your page's own error summary.
## Use instead when
- Use `EditSheet` instead for a form in a dialog that saves and closes, and a plain `