Question 1

What is a form field component?

Accepted Answer

A field is one row of a form: a FieldLabel, the control, and an optional FieldDescription and FieldError, laid out together. FieldGroup stacks fields, FieldSet and FieldLegend group them under a caption, and FieldSeparator divides them. It's shadcn.io's Field component, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid, and styled with Tailwind CSS. Each example is one small file.

Question 2

Are these field examples free?

Accepted Answer

Yes. Every field 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.

Question 3

How is Field different from a form library?

Accepted Answer

Field is layout and labeling: it holds no value and runs no validation. A form library such as React Hook Form or TanStack Form owns the values and errors; you connect each control to it and set invalid on the Field from its error.

Question 4

When should I use Field instead of a Label and an Input?

Accepted Answer

Whenever a control needs a description, an error or consistent spacing with the fields around it, which is most forms. A lone search box or an inline edit can use a Label, or an aria-label, directly.

Question 5

How do I put the label beside the control?

Accepted Answer

Set orientation to horizontal on Field. For checkboxes and switches, the control and its label then share a row; use FieldContent to stack a label and a description beside a control.

Question 6

How do I make a form switch layouts on wide screens?

Accepted Answer

Set orientation to responsive and put the fields in a FieldGroup. The label stacks over the control in a narrow group and moves beside it once the group is wide; it's a container query, so it follows the form's width, not the screen's.

Question 7

How do I lay out fields in columns?

Accepted Answer

Wrap the fields in a grid, such as grid grid-cols-2 gap-4, inside the FieldGroup or FieldSet. Each cell is an ordinary Field, and a column span gives one field more room than another.

Question 8

How do I show an error on a field?

Accepted Answer

Set invalid on Field when validation fails and render the message in FieldError. The field turns destructive and its control gets aria-invalid.

Question 9

How do I install a field 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, Field and the controls it uses, such as Input, Select or Checkbox, if you don't have them yet.

Question 10

How do labels connect to their controls?

Accepted Answer

On Ark UI, Vue, Svelte and Solid, Field connects its FieldLabel to the control inside it with no ids to write. On Base UI, React Aria and Radix UI, set the control's id and point FieldLabel's htmlFor at it, as each example on those libraries does.

Question 11

How do I mark a field optional or required?

Accepted Answer

When most fields are required, mark the few optional ones with (optional) after the label; otherwise mark required ones with an asterisk and set required on the control, which is what the browser and assistive tech read.

Question 12

What do the field examples depend on?

Accepted Answer

The Field component, the controls each example uses (Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider) and Tailwind CSS. No form library: the examples are layouts you connect to your own state or form library.

Question 13

Are field examples accessible?

Accepted Answer

Labels are real label elements tied to their controls, groups of choices use fieldset and legend, and invalid fields set aria-invalid. Sliders without a label element get an aria-label.

Question 14

Can I use these examples with React Server Components?

Accepted Answer

The static examples render as Server Components. Examples with state, such as the live character count or the sliders, are client components. On Vue, Svelte and Solid they're regular components.

Question 15

Which Tailwind CSS version do these examples need?

Accepted Answer

Tailwind CSS v4, the version shadcn.io's components use. The responsive layout relies on v4's container queries.

Field Examples

Complex Multi-Field Form

Choice Cards

Fieldset with Legend

Field Group with Separator

Range Slider

Simple Slider

Mixed Field Types with Separators

Horizontal Layout Input

Input with Description Above

Input with Description Below

Multiple Inputs in Group

Simple Input with Label

More component examples

Form

Input

Input Group

Input OTP

Label

Textarea

Hover Card

Item

Field examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every field example. One prompt away.