Form

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-form

Usage

import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import { Form } from '@/components/ui/form'
import { Input } from '@/components/ui/input'

<Form
  className="flex w-full flex-col gap-4"
  onSubmit={(e) => {
    /* handle submit */
  }}
>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input name="email" type="email" required />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
</Form>

Integrations

Using with Zod

Changelog

• Apr 17, 2026 — Form no longer applies default layout classes; pass className for stacked fields (flex w-full flex-col gap-4); for overlays, wrap panel + footer in Form className="contents" with header outside.

API Reference

Form Props

Thin wrapper around Base UI Form with no default layout. Pass className for spacing and structure (for example flex w-full flex-col gap-4 for a vertical field stack).

Dialog, sheet, drawer: Place DialogHeader (or sheet/drawer header) outside the form. Wrap DialogPanel and DialogFooter only in <Form className="contents"> (or <form className="contents">). The contents display value keeps panel and footer participating correctly in the popup flex layout without nesting the header inside the <form>.

Examples