Form

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/form

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Form
  onFormSubmit={(values, eventDetails) => {
    eventDetails.event?.preventDefault?.();
  }}
>
  <Field name="name">
    <FieldLabel>Name</FieldLabel>
    <FieldControl required placeholder="Ada Lovelace" />
    <FieldError />
  </Field>
  <Button type="submit">Submit</Button>
</Form>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

validationModeFormValidationMode'onSubmit'Determines when the form should be validated.

errorsFormContext['errors']—Validation errors returned externally, typically after submission by a server or a form action.

onFormSubmit((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void)—Event handler called when the form is submitted. preventDefault() is called on the native submit event when used.

actionsRefReact.RefObject<Form.Actions | null>—A ref to imperative actions.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Form — see its reference for the full keyboard map.

Source

src/components/ui/form/form.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Form

On this page