Form Field

Accessible validation without a form library. Rules run on blur, live once an error shows, and for every field on submit. Then focus jumps to the first problem.

import { Form, FormField, useForm, useFormField } from "pleate/form";

Booking request

Submit it empty to see every message; values are read from the form itself.

Props

Form onSubmit

Runs only when valid; useForm().submitting is true while it awaits.

(values, event) => void | Promise

Form onInvalid

Called when a submit is blocked.

(errors) => void

FormField name / label / description / hint

name must match the control.

string / ReactNode

required / minLength / maxLength / min / max / pattern / type

Built-in rules, with your own messages.

value | { value, message }

validate

Custom (and cross-field, async) checks.

(value, values) => string | undefined | Promise

error

Controlled message (e.g. from the server).

string

Accessibility

Label, description and error are linked with for/aria-describedby; aria-invalid on errors.
Errors are announced (polite live region); focus moves to the first invalid field on submit.