Primitive · CLI
Form
Base UI form validation orchestration — pair with Field.
Preview
npx shadcn@latest add @atroui/formInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/formSource lands in your repo. Installation · Registry
Usage
Pass server errors via errors={{ fieldName: message }}. Field owns label/error chrome; Form owns submit validation timing.
tsx
import { Form } from "@/components/ui/form"
import {
Field,
FieldControl,
FieldError,
FieldLabel,
} from "@/components/ui/field"
import { Button } from "@/components/ui/button"
<Form
onFormSubmit={(values) => {
console.log(values)
}}
>
<Field name="email">
<FieldLabel>Email</FieldLabel>
<FieldControl type="email" required placeholder="you@studio.dev" />
<FieldError match="valueMissing">Email is required.</FieldError>
</Field>
<Button type="submit">Continue</Button>
</Form>Form