Examples

These examples use the current public Form, Please API. Each live form runs in the browser with React Hook Form (RHF) 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 nuqs URL adapter.
• Research grant application combines nested discriminated unions, 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 React state that the form reads through context. It 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 models seven templates as a discriminated union with shared audience, schedule, payment, and create-or-edit flows.

Runtime ownership

TanStack Query owns request state in the examples that load or save data. Each example follows the core rules in How it works.