--- title: I built a headless React hook for multi-step forms with... description: FormTrek is a headless React hook library for building multi-step forms with conditional branching, per-step Zod validation, and pluggable persistence. The API... canonical: https://daily.dev/posts/i-built-a-headless-react-hook-for-multi-step-forms-with-conditional-branching-zod-validation-and-p-zacm0ndro twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence | daily.dev og:description: FormTrek is a headless React hook library for building multi-step forms with conditional branching, per-step Zod validation, and pluggable persistence. The API... og:url: https://daily.dev/posts/i-built-a-headless-react-hook-for-multi-step-forms-with-conditional-branching-zod-validation-and-p-zacm0ndro og:image: https://api.daily.dev/og/posts/ZAcm0NDRo.png og:image:alt: I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence **[ReactTsx](https://daily.dev/sources/reactjsx)** · [@shngffrd](https://daily.dev/shngffrd) · 2 min read · 2 upvotes · 0 comments ## Summary FormTrek is a headless React hook library for building multi-step forms with conditional branching, per-step Zod validation, and pluggable persistence. The API centers on a single `useTrek` hook that accepts step definitions as plain objects, supports localStorage/sessionStorage/URL params adapters, and is TypeScript-first with zero UI dependencies. It can be installed via `pnpm dlx formtrek init` or manually with `pnpm add formtrek zod`. ## Content Multi-step forms look simple on the surface. Then the requirements hit: - Step 3 only shows if the user picked "professional" in step 1 - Users need to save progress and return later - The same validation needs to run server-side too I've rebuilt this pattern from scratch three times. Each time it became a mess of `useReducer`, `useEffect`, and scattered `localStorage` calls. So I built **FormTrek** — a headless React hook that handles exactly this.  ## What it does 🔀 **Conditional branching** via plain objects — no JSX, no custom DSL ✅ **Per-step Zod schemas** that work client AND server-side 💾 **Pluggable persistence** — localStorage, sessionStorage, URL params, or custom 🎯 **TypeScript-first**, zero UI dependencies — you own the rendering ## The whole API is one hook ``` const { state, actions, currentStep } = useTrek({ formId: 'onboarding', steps, persistence: localStorageAdapter, onComplete: async (values) => submitToServer(values), }) ``` Steps are plain objects. Conditions are plain objects. You keep full control of rendering.   ## Install ``` pnpm dlx formtrek init ``` Or manually: `pnpm add formtrek zod` 🔗 **Docs + interactive demo:** [https://formtrek.dev/demo](https://formflow.shngffrd.com) 📦 **npm:** `formtrek` ⭐ **GitHub:** [https://github.com/shngffrddev/FormTrek](https://github.com/shngffrddev/formflow) Still early days but the core is solid. Would love feedback from anyone who's dealt with this pain before. ## Similar posts on daily.dev - [A Guide to Modern React Form Architecture: TanStack Form \+ Zod \+ Shadcn](https://daily.dev/posts/a-guide-to-modern-react-form-architecture-tanstack-form-zod-shadcn-osvxw2xhz) · freeCodeCamp · 7 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#zod](https://daily.dev/tags/zod) [View this post on daily.dev](https://daily.dev/posts/i-built-a-headless-react-hook-for-multi-step-forms-with-conditional-branching-zod-validation-and-p-zacm0ndro) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/i-built-a-headless-react-hook-for-multi-step-forms-with-conditional-branching-zod-validation-and-p-zacm0ndro","headline":"I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence","text":"FormTrek is a headless React hook library for building multi-step forms with conditional branching, per-step Zod validation, and pluggable persistence. The API centers on a single `useTrek` hook that accepts step definitions as plain objects, supports localStorage/sessionStorage/URL params adapters, and is TypeScript-first with zero UI dependencies. It can be installed via `pnpm dlx formtrek init` or manually with `pnpm add formtrek zod`.","url":"https://daily.dev/posts/i-built-a-headless-react-hook-for-multi-step-forms-with-conditional-branching-zod-validation-and-p-zacm0ndro","datePublished":"2026-03-28T17:37:37.494Z","dateModified":"2026-03-31T21:13:43.384Z","author":{"@type":"Person","name":"Shane","url":"https://daily.dev/shngffrd","image":"https://avatars.githubusercontent.com/u/208400032?v=4","description":"Frontend developer · TypeScript, Next.js, React · Greater Manchester","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":30}},"image":"https://media.daily.dev/image/upload/s--LfOTonV7--/f_auto/v1774991196/posts/ZAcm0NDRo?_a=BAMAMiWQ0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/reactjsx","name":"ReactTsx"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ReactTsx","item":"https://daily.dev/squads/reactjsx"},{"@type":"ListItem","position":3,"name":"I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence"}]} ```