1Sponsor

Form

Form container with validation, Ctrl+S submit, and dirty tracking

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/form.json

Usage

import { Form } from "@/components/ui/form";
<Form
  initialValues={{ name: "", email: "" }}
  fields={[
    { name: "name", validate: (v) => (v ? null : "Name is required") },
    { name: "email", validate: (v) => (v ? null : "Email is required") },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
>
  <Text>Name and email form (Ctrl+S to submit)</Text>
</Form>

API Reference

Form

PropTypeDefault
onSubmit(values: Record<string, unknown>) => voidrequired
initialValuesRecord<string, unknown>{}
fieldsFormField[][]
childrenReactNoderequired