Form

A native form with consolidated, auto-clearing validation error handling.

TSX
"use client";

import * as React from "react";

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";

export default function FormDemo() {
  const [errors, setErrors] = React.useState<Record<string, string>>({});

  return (
    <div className="w-full max-w-sm">
      <Form
        errors={errors}
        onFormSubmit={() => {
          // Simulate a server-side validation error. It clears automatically
          // once the field's value changes.
          setErrors({ url: "This URL is already taken." });
        }}
      >
        <Field name="url">
          <FieldLabel>Website</FieldLabel>
          <Input required type="url" placeholder="https://example.com" />
          <FieldError />
        </Field>
        <Button type="submit">Submit</Button>
      </Form>
    </div>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/formpnpm dlx shadcn@latest add @sevenui/formyarn dlx shadcn@latest add @sevenui/formbunx --bun shadcn@latest add @sevenui/form

Usage

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

<Form
  errors={errors}
  onFormSubmit={(values) => {
    // submit values, then set `errors` from the server response if any
  }}
>
  <Field name="url">
    <FieldLabel>Website</FieldLabel>
    <Input required type="url" placeholder="https://example.com" />
    <FieldError />
  </Field>
</Form>;

API reference

Form

Extends the Base UI Form primitive — all its props apply. Form renders a native <form> element and consolidates validation errors for the Fields nested inside it: entries in errors flow to each field’s <FieldError /> by name, and clear automatically once that field’s value changes.

There is no onClearErrors handler: errors set via errors clear automatically once the matching field’s value changes.

All other props accept standard HTML <form> attributes and an optional className override.