Field

Overview

Field is how forms are laid out in Morpha UI: each Field stacks a label, a control, an optional description and an error slot with consistent spacing; FieldGroup spaces fields; FieldSet + FieldLegend group related choices. Orientation can be vertical, horizontal (checkboxes, switches) or responsive (container-query driven).

Coming from shadcn? The legacy react-hook-form form component was replaced upstream by this Field family — Morpha UI adopts Field directly and ships no form component. Field is library-agnostic: pass any form library's errors to FieldError.

$ npx morpha-ui add field

Examples

Validation

Set aria-invalid on the control and state="error" on the InputGroup — it recolors the ring and shows the trailing alert. The error message replaces the supporting text (use InputGroupSupportingText error), so only one caption line ever shows.

Choice groups

Notifications

Comments

When someone replies to you.

Mentions

When someone mentions you.

Installation

Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add field. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add field

API Reference

Prop

Type

Accessibility

Field renders role="group"; FieldSet/FieldLegend use native fieldset/legend semantics.
Always pair FieldLabel htmlFor with the control id.
FieldError renders role="alert" so validation messages are announced; also set aria-invalid on the control.