Form

A form wraps a group of form elements and handles form submission.

<FormPrimitives.Form onSubmit={handleSubmit} className="w-xs space-y-4">
  <TextField isRequired>
    <Label>Name</Label>
    <Input name="name" minLength={2} placeholder="Name" />
    <Description>Please enter your full name.</Description>
  </TextField>
  <Button variant="primary" type="submit">
    Submit
  </Button>
</FormPrimitives.Form>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/form

Usage

Use forms to wrap groups of form elements and handle form submission with validation.

import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { TextField } from "@/components/ui/text-field";
import { Label } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Form onSubmit={handleSubmit}>
	<TextField name="email" isRequired>
		<Label>Email</Label>
		<Input />
	</TextField>
	<Button type="submit" variant="primary">
		Submit
	</Button>
</Form>

Examples

Register

API Reference

Prop	Type	Default	Description
`validationBehavior`	`'native' \| 'aria'`	`'native'`	Whether to use native HTML form validation or ARIA.
`validationErrors`	`ValidationErrors`	-	Validation errors to display on form fields.
`action`	`string \| FormHTMLAttributes<HTMLFormElement>['action']`	-	The URL to submit the form to.
`encType`	`string`	-	The encoding type to use for form submission.
`method`	`string`	-	The HTTP method to use for form submission.
`target`	`string`	-	The target window for form submission.
`autoComplete`	`string`	-	Whether the browser should autocomplete the form.
`autoCapitalize`	`string`	-	Whether text should be auto-capitalized.
`children`	`ReactNode`	-	The form content.

Event	Type	Description
`onSubmit`	`(e: FormEvent<HTMLFormElement>) => void`	Handler that is called when the form is submitted.
`onReset`	`(e: FormEvent<HTMLFormElement>) => void`	Handler that is called when the form is reset.
`onInvalid`	`(e: FormEvent<HTMLFormElement>) => void`	Handler that is called when validation fails.

Last updated on 5/22/2026