---
title: Form
description: A form container that handles validation and submission.
links:
  doc: https://base-ui.com/react/components/form
  api: https://base-ui.com/react/components/form#api-reference
---

```tsx
'use client';

import { Button } from '@/components/ui/button';
import {
  Field,
  FieldDescription,
  FieldLabel,
} from '@/components/ui/field';
import { Form } from '@/components/ui/form';
import { Input } from '@/components/ui/input';

export function FormDefault() {
  return (
    <Form className='w-full max-w-sm'>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type='email' placeholder='you@example.com' />
        <FieldDescription className='my-0!'>
          We&apos;ll never share your email.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel>Password</FieldLabel>
        <Input type='password' placeholder='Enter your password' />
      </Field>
      <Button type='submit' className='mt-2'>
        Sign In
      </Button>
    </Form>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/form
```

**Install the following dependencies:**

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

**Copy and paste the following code into your project.**

```tsx
'use client';

import { Form as FormPrimitive } from '@base-ui/react/form';

import { cn } from '@/lib/utils';

function Form({ className, ...props }: FormPrimitive.Props) {
  return (
    <FormPrimitive
      className={cn('flex w-full flex-col gap-4', className)}
      data-slot='form'
      {...props}
    />
  );
}

export { Form };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { Form } from "@/components/ui/form"
```

```tsx
<Form onSubmit={handleSubmit}>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type='email' />
  </Field>
  <Button type='submit'>Submit</Button>
</Form>
```