Question 1

What is a shadcn form?

Accepted Answer

A shadcn form is the validated, type-safe form pattern built on react-hook-form (the form state library) and Zod (the schema validator) wrapped by shadcn/ui's Form primitive (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage). It gives you uncontrolled inputs (no per-keystroke re-renders), end-to-end TypeScript inference from schema to onSubmit handler, and accessibility wiring (label↔input, error↔input via aria-describedby) for free.

Question 2

Are these form examples free?

Accepted Answer

Yes, every form example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating. react-hook-form and Zod are MIT-licensed too.

Question 3

Why react-hook-form + Zod and not Formik or Final Form?

Accepted Answer

react-hook-form uses uncontrolled inputs (refs, not controlled state) so 100-field forms don't re-render on every keystroke — the perf difference vs Formik is real on large forms. Zod gives you a single TypeScript-typed schema that doubles as runtime validation: define `z.object({ email: z.string().email() })` once, get the typed `{ email: string }` shape automatically, get runtime validation on submit. shadcn/ui glues them together with Form primitives that wire ARIA correctly.

Question 4

When should I use a form versus inline-edit fields?

Accepted Answer

Form for create / edit flows where the user fills in multiple values and submits as a unit — sign-up, settings page, checkout. Inline-edit (click-to-edit single field, save on blur) for surfaces where users update one value at a time without leaving the page — Notion-style cell editing, settings rows that auto-save. Mixed: a settings page can use Form for create-account and inline-edit for individual preferences.

Question 5

How do I build a multi-step / wizard form?

Accepted Answer

Use the multi-field variant. Define ONE Zod schema covering all steps. Track `currentStep` in state. Render the FormFields for the current step only; the others stay registered (their state survives) but aren't visible. Validate per-step on Next via `form.trigger(['step1Fields'])`. Final submit validates the whole schema. Pattern reference: shadcn's official multi-step example uses this exact approach.

Question 6

How do I show server-side validation errors after submission?

Accepted Answer

Use the validation variant. Submit handler returns server errors as `{ field: 'email', message: 'Already taken' }`. Apply them via `form.setError('email', { message: 'Already taken' })`. The Form's FormMessage for that field renders the error and shifts focus to it. For error responses without a specific field (network failure, server 500), render a top-level Alert above the form rather than mapping to a field.

Question 7

How do I handle async / server-action submission with pending UI?

Accepted Answer

Wrap submit in `useTransition` or use `useFormStatus` (Next.js Server Actions). Disable the submit button + dismiss controls during pending. Show a Spinner inside the submit button ("Saving…"). On error, keep the form open with the error rendered. On success, redirect / close / reset depending on context. Don't re-enable the button until the response settles — repeated submissions during pending are a real bug source.

Question 8

How do I install a form example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/form/…`, plus the shadcn/ui Form primitive and any inner controls (Input, Textarea, Select, Checkbox, Switch, etc.). Install react-hook-form + zod + @hookform/resolvers if they aren't in your project.

Question 9

How do I integrate the form with Next.js Server Actions?

Accepted Answer

Use react-hook-form on the client for instant validation feedback, then call your Server Action from the submit handler with the validated data. The Server Action does its server-side validation (NEVER trust client validation alone) and writes to the database. On error, set form errors via `form.setError`. On success, call `router.refresh()` or redirect. Progressive enhancement: the `<form action={serverAction}>` works without JS too.

Question 10

How do I share a Zod schema between client validation and server validation?

Accepted Answer

Define the schema once in a shared `lib/schemas.ts`. Import on the client for `zodResolver(formSchema)`. Import on the server for `formSchema.parse(formData)` inside your Server Action. Single source of truth; one schema change updates both validation paths automatically. The TypeScript type is inferred from the schema via `z.infer<typeof formSchema>` so the data flows typed end-to-end.

Question 11

Which libraries do form examples depend on?

Accepted Answer

react-hook-form (the form state library — uncontrolled inputs, validation hooks), Zod (the schema validator — single source of truth for shape + runtime validation), @hookform/resolvers (the glue between rhf and Zod), shadcn/ui Form + Field + inner control primitives (styled wrappers generated into your project). React 19 baseline. Optional: TanStack Query / SWR for async submission state if you don't use Server Actions.

Question 12

Are form examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. shadcn's Form primitives wire all ARIA correctly: FormLabel uses `htmlFor` to focus the FormControl, FormDescription and FormMessage are linked via `aria-describedby` so screen readers announce them with the input. Required fields get `aria-required`; invalid fields get `aria-invalid`. Submit fires Enter on any field. Tab cycles in DOM order — group related fields physically so the tab order matches the visual order.

Question 13

Can I use these form examples with React Server Components?

Accepted Answer

react-hook-form is client-only (manages state via refs and effects). The form itself needs `"use client"`. But the form can sit inside a Server Component layout, the schema is shared between client and server, and the submit handler can call a Server Action. For zero-JS forms (sign-up forms that need to work without JS), use plain `<form action={serverAction}>` + Zod parse on the server — simpler than wiring rhf for a form that doesn't need client validation.

React Form Examples for shadcn/ui

Browse every form example

Frequently Asked Questions