Forms

Usage

Overview

A form in @prepared911/ui is a native form plus labeled fields. Form (@prepared911/ui/form) owns submit, pending, and the error summary. Field (@prepared911/ui/field) owns the label, the control, description, and error. Page, dialog, and drawer chrome are blocks: FormLayoutStandard, FormLayoutSectioned, FormLayoutDrawer, and FormDialog.

The feature owns the schema. Pass the validated submit handler into onSubmit. The design system does not wrap react-hook-form.

When to use

Create and edit flows that commit structured data.
A page or panel whose footer is Save and Cancel: FormLayoutStandard.
A short edit that lives in a dialog and should confirm before discarding dirty values: FormDialog.
A side panel with a scrolling body and a sticky footer: FormLayoutDrawer.
Several groups under one submit: FormLayoutSectioned.

When not to use

A control that applies as soon as it changes, with no Save. Use Switch or another control directly.
Masked business rules that belong to one feature. Keep those schemas next to the feature. Field only formats the control.

Submit and pending

onSubmit runs for every submit that passes native validation. If it returns a promise, the form is pending until the promise settles, unless pending is controlled. Repeat submits are ignored while pending. Read that state with useFormPending() and set loading on the Save button.

Save is not disabled just because nothing changed.

Errors

Set errorSummary to localized copy when the attempt failed. By default, focus moves to the first control marked invalid. Field-level errors stay on Field.

Filters / Accessibility

Forms / API and Development

On this page

Forms

Usage

Overview

The feature owns the schema. Pass the validated submit handler into onSubmit. The design system does not wrap react-hook-form.

When to use

Create and edit flows that commit structured data.
A page or panel whose footer is Save and Cancel: FormLayoutStandard.
A short edit that lives in a dialog and should confirm before discarding dirty values: FormDialog.
A side panel with a scrolling body and a sticky footer: FormLayoutDrawer.
Several groups under one submit: FormLayoutSectioned.

When not to use

A control that applies as soon as it changes, with no Save. Use Switch or another control directly.
Masked business rules that belong to one feature. Keep those schemas next to the feature. Field only formats the control.

Submit and pending

Save is not disabled just because nothing changed.

Errors

Set errorSummary to localized copy when the attempt failed. By default, focus moves to the first control marked invalid. Field-level errors stay on Field.

Filters / Accessibility

Forms / API and Development

On this page