Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Form
description: A thin Astro form wrapper with sensible vertical spacing for fulldev field primitives.
---

`Form` is intentionally small. It is just a styled `<form>` element with vertical
spacing so you can compose regular Astro forms with `Field`, `Input`,
`Textarea`, `Checkbox`, `NativeSelect`, and `Button`.

## Installation

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

## Usage

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

```astro
---
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
---

<Form method="post">
  <FieldGroup>
    <Field>
      <FieldLabel for="name">Name</FieldLabel>
      <Input id="name" name="name" />
    </Field>
    <Field>
      <FieldLabel for="message">Message</FieldLabel>
      <Textarea id="message" name="message" />
      <FieldDescription>Tell us what you are building.</FieldDescription>
    </Field>
  </FieldGroup>

  <Button type="submit">Send</Button>
</Form>
```

## Example

```astro live props={{ name: 'form' }}
---
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
---

<Form class="w-full max-w-xl">
  <FieldGroup>
    <Field>
      <FieldLabel for="contact-name">Name</FieldLabel>
      <Input id="contact-name" name="name" placeholder="Ada Lovelace" />
    </Field>
    <Field>
      <FieldLabel for="contact-email">Email</FieldLabel>
      <Input
        id="contact-email"
        type="email"
        name="email"
        placeholder="ada@example.com"
      />
    </Field>
    <Field>
      <FieldLabel for="contact-message">Message</FieldLabel>
      <Textarea
        id="contact-message"
        name="message"
        placeholder="Tell us about your project"
      />
      <FieldDescription>These are regular Astro form controls.</FieldDescription
      >
    </Field>
  </FieldGroup>

  <Button type="submit" class="w-fit">Send message</Button>
</Form>
```

## Notes

- Use plain Astro form attributes like `method`, `action`, and `netlify` directly on `Form`.
- Use `Field` and `FieldGroup` for structure instead of generated form schemas.
- If you do not need the default spacing, use a plain `<form>` element instead.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/form) for more information on props.