Form

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/form.json

npx shadcn@latest add https://prototyper-ui.com/r/form.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/form.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/form.json

This will add the following files to your project:

• components/ui/form.tsx

Usage

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

<Form onFormSubmit={(formValues) => console.log(formValues)}>
  {/* Field components */}
  <button type="submit">Submit</button>
</Form>

Examples

Server Errors

Validation Modes

Styling

Data Slots

Use data-slot attributes to target the form:

Customization Examples

/* Custom form layout */
[data-slot="form"] {
  @apply gap-4;
}

{/* Override gap spacing */}
<Form className="gap-8">
  {/* ... */}
</Form>

API Reference

Form

Root form element with consolidated error handling. Renders a <form> element.

All Base UI Form props are forwarded via ...props.

Accessibility

ARIA Attributes

• Renders a native <form> element with proper form semantics.
• Error messages are associated with fields via aria-describedby.
• aria-invalid is set on fields with validation errors.
• The errors prop triggers aria-errormessage associations on matching fields.

Related