Examples
These examples use the current public "Form, Please" API. Each live form runs in the browser with React Hook Form as its state and validation runtime.
Design-system integration
- Material UI with Yup uses the official Material UI preset and validates the form with Yup through Standard Schema.
- Shadcn with Valibot uses an application-owned control and slot adapter. Valibot validates the same definition.
Custom control integration
- Async multiselect stores selected IDs in one field. TanStack Query loads options, and Floating UI manages the popup.
Product workflows
- History workflow adds grouped undo, redo, seek, and in-memory journal transfer to managed value updates.
- Query string persistence restores and autosaves an
editable draft through a
nuqsURL adapter. - Research grant application combines conditional applicant fields, registry search, a live preview, and two submission steps.
- Creative studio policies passes an asynchronous
equipment catalog through form context and adapts it with
fromResource. - Makerspace launch wizard keeps the active stage in form values and combines address lookup, media, pricing, and promotions.
- Learning cohort editor combines remote title suggestions, two movable arrays, media, offers, and conflict feedback.
- Membership ladder combines nested benefit arrays, a workspace action, pause shortcuts, and cross-tier validation.
- Campaign builder supports seven conditional templates with shared audience, schedule, payment, and create-or-edit flows.
Runtime ownership
"Form, Please" resolves definitions and renders controls. React Hook Form owns editable state, array operations, validation, and submission. TanStack Query owns request state in the examples that load or save data.
Hidden fields preserve their values. Conditional schemas decide which values are required for the active branch. Successful submission parses the schema a second time and passes transformed output to the submit callback.