# Form

Monolith Form component built with react-hook-form and zod.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







<ComponentPreview name="form">
  <div className="flex items-center gap-4 py-8">
    <FormDemo />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/form.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
```

## Examples [#examples]

### Checkbox [#checkbox]

<ComponentPreview name="checkbox-form">
  <div className="flex items-center justify-center gap-4 py-8">
    <CheckboxForm />
  </div>
</ComponentPreview>

### Radio Group [#radio-group]

<ComponentPreview name="radio-group-form">
  <div className="flex items-center justify-center gap-4 py-8">
    <RadioGroupForm />
  </div>
</ComponentPreview>

### Select (Dropdown) [#select-dropdown]

<ComponentPreview name="select-form">
  <div className="flex items-center justify-center gap-4 py-8">
    <SelectForm />
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Form` component relies on `react-hook-form` and provides a set of wrapper components.

| Component         | Description                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------- |
| `Form`            | The root context provider for the form, mapping `react-hook-form` methods.                                     |
| `FormField`       | Connects an input field to the form state using the `name` prop.                                               |
| `FormItem`        | A wrapper for the label, input, description, and error message. Automatically generates IDs for accessibility. |
| `FormLabel`       | The label for the field, automatically colored in the error state.                                             |
| `FormControl`     | The actual input element wrapper. Applies `aria-describedby` and `aria-invalid` attributes.                    |
| `FormDescription` | Helper text for the input field.                                                                               |
| `FormMessage`     | Displays validation error messages tied to the field.                                                          |