Fields

What is the Field component?

The <Field /> component combines labels, controls, descriptions, and validation messages into accessible form fields. It also provides layout primitives for related fields, fieldsets, and responsive orientations.

Field is independent of form state and validation libraries. You can compose it with native form controls or integrate it with libraries such as React Hook Form and Zod.

With React Hook Form, render each controlled value through <Controller />, apply data-invalid to Field, and apply aria-invalid to the actual control. Use <FieldError /> to display validation errors.

See the shadcn/ui Field documentation and the shadcn/ui React Hook Form guide for additional composition patterns.