Library · Forms & CTAs

Form

Progressive-enhancement form wrapper with built-in client-side validation, aria-invalid state management, and an accessible error summary notification shown on failed submit.

Figma: Primitives / Form ↗

Live preview — edit theme bottom-right

---
import Form from "../components/primitives/forms/Form.astro";
import Fieldset from "../components/primitives/forms/Fieldset.astro";
import Input from "../components/primitives/forms/Input.astro";
import Textarea from "../components/primitives/forms/Textarea.astro";
import Checkbox from "../components/primitives/forms/Checkbox.astro";
---
<Form>
  <Fieldset name="contact-details" legend="Contact details" variant="minimal">
    <Input
      name="email"
      label="Email address"
      type="email"
      required
      data-validation="Please provide a valid email address"
    />
    <Textarea name="message" label="Your message" rows={4} placeholder="Tell us what's on your mind..." />
    <Checkbox name="subscribe" label="Subscribe" />
  </Fieldset>
  <button type="submit">Submit</button>
</Form>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the form
`action`	`string`	—	Form action URL
`name`	`string`	—	Form name attribute
`method`	`'get' \| 'post'`	—	HTTP method for form submission (default: "post")
`enctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	—	Encoding type for form data (default: "application/x-www-form-urlencoded")
`target`	`'_self' \| '_blank' \| '_parent' \| '_top'`	—	Target for form submission (default: "_self")
`autocomplete`	`'on' \| 'off'`	—	Autocomplete behavior (default: "on")

Example with all props

<Form
  class="enquiry-form"
  action="/api/enquire"
  name="enquiry"
  method="post"
  enctype="application/x-www-form-urlencoded"
  target="_self"
  autocomplete="on"
>
  <Input name="email" type="email" label="Email" required data-validation="Enter a valid email" />
  <Button htmlType="submit" type="primary">Send enquiry</Button>
</Form>