Form

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/form

UsageCopy Anchor Link

Form validates its fields on submit, focuses the first invalid one, and re-validates as the user fixes it. onFormSubmit runs only when every field is valid, and gets the values keyed by each field's name.

import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";

<Form
  className="gap-4 flex flex-col"
  onFormSubmit={(values) => console.log(values.email)}
>
  <Field name="email">
    <FieldLabel>Email</FieldLabel>
    <Input required type="email" />
    <FieldError>Please enter a valid email.</FieldError>
  </Field>
  <Button type="submit">Subscribe</Button>
</Form>;

Form has no default layout, so pass className for spacing.

Server errorsCopy Anchor Link

Pass errors from your server to errors, keyed by field name. An empty FieldError shows them, and each error clears when the user edits that field.

In dialogs and sheetsCopy Anchor Link

Keep the header outside the form. Wrap only the body and footer in <Form className="contents"> so they stay in the popup's layout.

API referenceCopy Anchor Link

Also accepts every Base UI Form prop and native <form> attribute.