<Form onSubmit={handleSubmit} className="w-xs space-y-4">
<TextField name="name" minLength={2} isRequired>
<Label>Name</Label>
<Input placeholder="Name" />
<Description>Please enter your full name.</Description>
</TextField>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>npx shadcn@latest add @dotui/formUse 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>| 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 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.