Form
Labels, hints, errors, one save.
In context
Edit project
Contact form
Within two working days.
See Workshops, or write to the same address.
Thanks, we’ll get back to you soon.
A copy is on its way to maria@example.com.
Form props
| Prop | Type | Required | Default |
|---|---|---|---|
onSubmit | SubmitHandler<TFieldValues> | Yes | — |
defaultValues | AsyncDefaultValues<TFieldValues> | { [x: string]: any; } | ((BrowserNativeObject | NestedValue) & FieldValues) | { ...; } | undefined | No | — |
status | "idle" | "submitting" | "success" | "error" | undefined | No | — |
successMessage | ReactNode | No | — |
errorMessage | ReactNode | No | — |
FormItem props
| Prop | Type | Required | Default |
|---|---|---|---|
name | string | Yes | — |
label | ReactNode | Yes | — |
required | boolean | undefined | No | — |
rules | Omit<RegisterOptions, "required"> | undefined | No | — |
Status and the contact form recipe
Pass status and the form follows it: submitting disables every field in a <fieldset disabled> and sets aria-busy; error shows errorMessage in a role="alert" banner above the fields and leaves them editable; success swaps the form for successMessage in a role="status" panel, and returning to idle resets the fields. You own the status: set submitting at the start of onSubmit, then success or error.
A spam honeypot is app code, not a prop: a field that is visually hidden (off-screen, not display: none), tabindex="-1", autocomplete="off" and aria-hidden. A person never fills it; if it has a value, drop the submission in onSubmit without an error. Pair it with a simple challenge question if you need more. Until Textarea ships, use <textarea className="rebar-input"> for the message.
Accessibility
A real <form> (noValidate, so the library's own messages show instead of the browser's). Each FormItem renders a <label for> tied to its control by name, marks a required field with an asterisk, and announces its error through role="alert".
data-rebar-* attributes
data-rebar-component="form" on the form; data-rebar-component="form-item" on each item with data-rebar-part="label" | "error".
Migrating to Ant Design
AntD's Form and Form.Item take name, label and rules in the same shape; onSubmit becomes onFinish, and the render-prop child becomes a plain child control.