---
title: Form
description: A form wrapper component that simplifies validation and submission.

links:
  doc: https://base-ui.com/react/components/form#api-reference
---

<ComponentPreview name="p-form-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/form
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react zod
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="form" title="components/ui/form.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
```

```tsx
<Form
  className="flex w-full flex-col gap-4"
  onSubmit={(e) => {
    /* handle submit */
  }}
>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input name="email" type="email" required />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
</Form>
```

## API Reference

### Form

Thin wrapper around Base UI `Form` with no default layout. Pass **`className`** for spacing and structure (for example `flex w-full flex-col gap-4` for a vertical field stack).

**Dialog, sheet, drawer:** Place **`DialogHeader`** (or sheet/drawer header) **outside** the form. Wrap **`DialogPanel`** and **`DialogFooter`** only in **`<Form className="contents">`** (or **`<form className="contents">`**). The **`contents`** display value keeps panel and footer participating correctly in the popup flex layout without nesting the header inside the `<form>`.

## Examples

### Using with Zod

<ComponentPreview name="p-form-2" />

## Changelog

- [Apr 17, 2026](/ui/docs/changelog#form) — **`Form`** no longer applies default layout classes; pass **`className`** for stacked fields (`flex w-full flex-col gap-4`); for overlays, wrap **panel + footer** in **`Form className="contents"`** with **header** outside.