Components

Form

Composable field layout with optional error map—aligned with shadcn Form ergonomics without requiring react-hook-form.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add form to your project.

watermelon add form

Import Form from your local UI registry output.

Import

import { Form } from "@/components/ui/form";

import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";

Pass an errors object keyed by field name. FormMessage reads the message for the surrounding FormField (or a name override).

Form accepts standard container props plus errors. Wire validation in your app and update errors when values change.