## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/form
```
```bash
pnpm dlx shadcn@latest add @dotui/form
```
```bash
yarn dlx shadcn@latest add @dotui/form
```
```bash
bun x shadcn@latest add @dotui/form
```
## Usage [#usage]
Use forms to wrap groups of form elements and handle form submission with validation.
```tsx
import { Form } from '@/components/ui/form'
import { Button } from '@/components/ui/button'
import { TextField } from '@/components/ui/text-field'
import { Label } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
```
```tsx
```
## Examples [#examples]
## API Reference [#api-reference]
| Prop | Type | Default | Description |
| -------------------- | --------------------------------------------------------- | ---------- | --------------------------------------------------- |
| `validationBehavior` | `'native' \| 'aria'` | `'native'` | Whether to use native HTML form validation or ARIA. |
| `validationErrors` | `ValidationErrors` | - | Validation errors to display on form fields. |
| `action` | `string \| FormHTMLAttributes['action']` | - | The URL to submit the form to. |
| `encType` | `string` | - | The encoding type to use for form submission. |
| `method` | `string` | - | The HTTP method to use for form submission. |
| `target` | `string` | - | The target window for form submission. |
| `autoComplete` | `string` | - | Whether the browser should autocomplete the form. |
| `autoCapitalize` | `string` | - | Whether text should be auto-capitalized. |
| `children` | `ReactNode` | - | The form content. |
| Event | Type | Description |
| ----------- | ----------------------------------------- | -------------------------------------------------- |
| `onSubmit` | `(e: FormEvent) => void` | Handler that is called when the form is submitted. |
| `onReset` | `(e: FormEvent) => void` | Handler that is called when the form is reset. |
| `onInvalid` | `(e: FormEvent) => void` | Handler that is called when validation fails. |