Form

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

A comprehensive form combining multiple field types.

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.