Loading…

Form

Accessible field wiring that works with any form library, or none.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add form

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
With Error
Live Validation
Mixed Controls
Animated Messages

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Form>

Plus every attribute of <form>.

<FormField>

Prop	Type	Default
`error` Present when the field is invalid. Its content is rendered by FormMessage.	`ReactNode`	—
`name` Field name, mirrored onto the wrapper for form-library integration.	`string`	—

Plus every attribute of <div>.

<FormLabel>

Every prop of Radix UI’s Label.Root, plus className.

<FormControl>

Every prop of Radix UI’s Slot.Root, plus className.

<FormDescription>

Plus every attribute of <p>.

<FormMessage>

Prop	Type	Default
`animateExit` Keeps a cleared message on screen long enough to fade and collapse, rather than removing it at once. The departing copy is `aria-hidden`, carries no id and is no longer named by the control, so it is never announced or described. Off by default: with it on, the old text is briefly still in the DOM, which tests asserting its absence immediately would notice.	`boolean`	`false`

Plus every attribute of <p>.

Accessibility

FormField generates the id, points the Label at the control, and assembles aria-describedby from whichever of the description and error are actually present — a dangling reference announces nothing and is flagged by axe. aria-invalid follows the error. FormMessage is a polite live region, so a late validation message is announced without interrupting. With animateExit, a cleared message lingers only as an aria-hidden copy with no id, which the control no longer references.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

error

Present when the field is invalid. Its content is rendered by FormMessage.

ReactNode

—

name

Field name, mirrored onto the wrapper for form-library integration.

string

—

Prop

Type

Default

animateExit

Keeps a cleared message on screen long enough to fade and collapse, rather than removing it at once. The departing copy is aria-hidden, carries no id and is no longer named by the control, so it is never announced or described. Off by default: with it on, the old text is briefly still in the DOM, which tests asserting its absence immediately would notice.

boolean

false