Question 1

What is a shadcn field?

Accepted Answer

A shadcn field is the wrapper that pairs a Label with an Input (or Textarea, Select, Checkbox, Switch — any control) plus optional description text and validation message slots. It's the building block for forms — every row in a settings page, every cell in a multi-column form, every "label above input below" pattern composes from Field. Built on shadcn/ui's Field primitive with semantic ARIA wiring (`aria-describedby` for description + error, `htmlFor` on the label).

Question 2

Are these field examples free?

Accepted Answer

Yes, every field example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

How is Field different from Form?

Accepted Answer

Field is the row-level wrapper — one label, one control, one error / hint slot. Form is the page-level orchestrator — handles state, submission, async validation, multi-field validation. shadcn ships both: Form (built on react-hook-form + Zod) wraps your form's submit / state logic; FormField (the Form-specific Field variant) wires individual fields into the form's state. Use Field for static layouts and quick controlled inputs; use Form + FormField for full validation + submission.

Question 4

When should I use a Field versus stacking Label + Input directly?

Accepted Answer

For one-off inputs in non-form contexts (a header search box, a single inline edit), Label + Input directly is fine — Field would be over-engineered. For ANY form with multiple inputs, use Field — the consistent label/spacing/error treatment pays for itself by the third field. The visual rhythm of a form with mixed Field and non-Field inputs reads as broken.

Question 5

Which field variant fits a settings page with text inputs?

Accepted Answer

Use the basic-inputs variant. Each Field renders Label above Input above Description ("This is what teammates will see"). Spacing between fields uses `space-y-6` for breathing room. For dense settings pages with 10+ fields, drop to `space-y-4` and group related fields under section headings (Profile, Account, Notifications) so the form scans as chunks rather than a wall.

Question 6

How do I lay out fields in two columns?

Accepted Answer

Use the layouts variant. Wrap pairs of Fields in `

`. The mobile-first single-column layout collapses to two columns at sm. For form-row-with-mixed-widths layouts ("First name | Last name" same width, "Email" full-width), use a 12-column grid (`grid-cols-12`) and span fields explicitly (`col-span-6` for halves, `col-span-12` for full).

Question 7

How do I show validation errors next to a field?

Accepted Answer

Pass an `error` message to Field — it renders below the input in destructive color and adds `aria-invalid="true"` to the input automatically. The error text is read by screen readers via the `aria-describedby` wiring. For inline server-validation errors (uniqueness check on email, async validation), set the error after the fetch returns; clear it when the user edits the field again.

Question 8

How do I install a field 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/field/…`, plus the shadcn/ui Field primitive and any inner controls (Input, Textarea, Select, etc.) used by the example.

Question 9

How do I make a field required versus optional?

Accepted Answer

Visually, append a small `(optional)` after the label for optional fields rather than marking required ones with asterisks. When everything is required by default, marking required adds noise; calling out the optional ones is shorter. For forms where optional fields are rare, flip it: mark required with `*` and add an explanatory note ("* required") at the top of the form.

Question 10

How do I integrate Field with react-hook-form?

Accepted Answer

Wrap the field in shadcn's FormField (a thin wrapper over Field that subscribes to react-hook-form's state). Pass `name="email"` to bind the field to the form's `email` value, and `render={({ field }) => <Input {...field} />}` to project the form's state into the input. Validation errors flow automatically from the Zod schema attached to your form's resolver.

Question 11

Which libraries do field examples depend on?

Accepted Answer

shadcn/ui Field + Label (the styled wrappers generated into your project), Tailwind CSS, and the inner control primitives the example uses (Input, Textarea, Select, Checkbox, Switch). For form-integrated examples, react-hook-form + Zod + shadcn/ui Form are the canonical pairing. React 19 baseline.

Question 12

Are field examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Field wires the label's `htmlFor` to the input's `id`, so clicking the label focuses the input. Description and error slots are linked to the input via `aria-describedby` so screen readers announce them when the input is focused. Required fields get `aria-required="true"`; invalid fields get `aria-invalid="true"` plus the error in `aria-describedby`. Tab order matches DOM order — label, input, description.

Question 13

Can I use these field examples with React Server Components?

Accepted Answer

Static fields (no client state) render cleanly as Server Components — useful for read-only forms and submitted-state confirmations. Interactive fields (controlled value, validation, focus management) need a client boundary. Server Actions + progressive enhancement work great for simple forms: the form submits via a Server Action, the field shows the success / error response after the round-trip.

React Field Examples for shadcn/ui

Browse every field example

Frequently Asked Questions