Form

Installation

npx baseui-cn add form

Usage

import { Button } from "@/components/ui/button"
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"
;<Form
  onFormSubmit={async (values) => {
    console.log(values)
  }}
>
  <Field name="email">
    <FieldLabel>Email</FieldLabel>
    <FieldControl type="email" placeholder="you@example.com" />
    <FieldError />
  </Field>
  <Button type="submit">Submit</Button>
</Form>

Form Demo

Build an entire Base UI form out of Field parts and keep validation, submission state, and help text consistent.

Why Use This Wrapper

This keeps the Base UI Form primitive on a project-local import path, gives the form a consistent layout shell, and makes dependent blocks like login and signup install everything they need through the registry.