Form

Wraps a native <form> and consolidates validation: it collects values from the Field components inside it, surfaces server-side errors through the errors prop, and hands you parsed values via onFormSubmit. Use it as the outermost element of any multi-field form. For a single labeled control, Field alone is enough.

Preview

Installation

npx shadcn@latest add @cubby-ui/form

Usage

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

<Form />

Examples

Submit as JavaScript Object

Use onFormSubmit instead of onSubmit to receive form values as a JavaScript object.

Constraint Validation

Use native HTML validation attributes (required, pattern, minLength, type, min, max, etc.) with a single FieldError that displays the browser's native error message.

Server-side Validation

Display errors returned by server-side validation via the errors prop.

Server Function with useActionState

Submit with a Server Function using useActionState and the action prop.

Zod Validation

Use Zod schemas with z.flattenError to map validation errors to fields.

React Hook Form

Integrate with React Hook Form using Controller and Base UI Field's external state props.

TanStack Form

Integrate with TanStack Form using useForm and form.Field render props.

Complete Form

Combine multiple field types in one validated form.

API Reference

The Form component is built on top of Base UI's Form. All Base UI props are supported.

For the complete Base UI API, see the Base UI Form documentation.

Props

Form

A native form element with consolidated error handling. Renders a <form> element.