Question 1

What is a shadcn form?

Accepted Answer

A form built from shadcn.io's Field components and wired to React Hook Form, with a Zod schema for validation. Each control sits in a `Field` with its `FieldLabel`, an optional `FieldDescription` and a `FieldError`; a `Controller` hands the control its value and change handler and the field its error, and `Field invalid` styles the label and control when it fails. Each example is one small file, on React with Base UI, React Aria, Ark UI or Radix UI.

Question 2

Are these form examples free?

Accepted Answer

Yes. Every form example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account. React Hook Form and Zod are MIT-licensed.

Question 3

Why React Hook Form and Zod and not Formik or Final Form?

Accepted Answer

React Hook Form keeps the values outside React state, so a long form doesn't re-render on every keystroke, and its `Controller` works with any control, including selects, checkboxes and switches. Zod gives one schema that is both the TypeScript type and the runtime check: `z.object({ email: z.email() })` types `onSubmit` and validates the input. The examples are React only for that reason: React Hook Form is a React library. For TanStack Form or Formisch, see the forms guides in the docs.

Question 4

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

Accepted Answer

A form when the user fills in several values and submits them together: sign-up, checkout, a settings page. Inline editing when people change one value at a time without leaving the page, such as a table cell or a setting that saves on blur. A settings page can mix both.

Question 5

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

Accepted Answer

Keep one `useForm` and one schema for all the steps, track the current step in state, and render only that step's fields. Values of hidden steps stay in the form. On Next, call `form.trigger([...])` with the current step's field names and move on only if it returns true; the final submit validates everything.

Question 6

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

Accepted Answer

When the server rejects a value, call `form.setError("email", { message: "Already taken" })`: the field's `fieldState.invalid` turns true and its `FieldError` shows the message. For errors that belong to no field, such as a network failure, use `form.setError("root", …)` and render `form.formState.errors.root` in an Alert above the button.

Question 7

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

Accepted Answer

Make `onSubmit` async and await your request or Server Action; `form.formState.isSubmitting` is true until it settles. Disable the submit button with it and show a Spinner and a label such as Saving. On error, keep the form and set the errors; on success, reset, close or redirect.

Question 8

How do I validate as the user types?

Accepted Answer

Set `mode` on `useForm`: `onChange` checks every change, `onBlur` checks when a field loses focus, and `onTouched` waits for the first blur and then checks on every change. The default checks on submit and then again on each change of a field that failed. The validation examples show these modes.

Question 9

How do I install a form example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, such as Field, Input, Select or Checkbox, plus `react-hook-form`, `zod` and `@hookform/resolvers` if your project doesn't have them yet.

Question 10

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

Accepted Answer

Validate on the client with React Hook Form, then call the Server Action from `onSubmit` with the validated values. Parse them again on the server with the same Zod schema, since client checks can be skipped. Return field errors from the action and apply them with `form.setError`; on success, refresh or redirect.

Question 11

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

Accepted Answer

Export the schema from a shared module, such as `lib/schemas.ts`. Pass it to `zodResolver` on the client and call `schema.safeParse` in your route or Server Action. `z.infer<typeof schema>` types the values on both sides, so one change updates both.

Question 12

Which libraries do form examples depend on?

Accepted Answer

shadcn.io's Field components and the controls each example uses (Input, Textarea, Select, Checkbox, Switch, RadioGroup, Button), React Hook Form, Zod 4, `@hookform/resolvers` and Tailwind CSS. The controls come in the version for your library: Base UI, React Aria, Ark UI or Radix UI.

Question 13

Are form examples accessible for keyboard and screen reader users?

Accepted Answer

Each control has a visible `FieldLabel` tied to it, and `Field invalid` marks the control `aria-invalid` while it fails, with the `FieldError` message shown under it. Groups of radios or checkboxes sit in a `FieldSet` with a `FieldLegend`. Every form submits on Enter from a text field, and the tab order follows the visual order.

Question 14

Can I use these form examples with React Server Components?

Accepted Answer

The forms are client components, since React Hook Form uses hooks. Put the form in a Server Component page, load its default values on the server and pass them as props, and submit to a Server Action. For a form that must work without JavaScript, use a plain form with an `action` and validate with Zod on the server.

Form Examples

Form with Checkbox

Form with Mixed Controls

Form with Multiple Selects

Form with Radio Buttons

Form with Select

Form with Switch

Form with Textarea

Email Input Form

Number Input Form

Password Input Form

Phone Input Form

Search Input Form

More component examples

Input

Input Group

Input OTP

Label

Textarea

Field

Hover Card

Item

Form examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every form example. One prompt away.