Form

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

npx shadcn@latest add @fulldev/form

Usage

import { Form } from "@/components/ui/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 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

---
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 for more information on props.