Forms

Form, Field, and app-owned Zod validation.

Quick Reference

Use @prepared911/ui for the controls and keep the schema in the feature:

Form from @prepared911/ui/form is the form element. It does not ship useZodForm.
Field from @prepared911/ui/field is the labeled control. FormInput is not an export.
Select from @prepared911/ui/select is the select. An empty value is null.
FormLayoutStandard, FormLayoutSectioned, FormLayoutDrawer, and FormDialog are the shells.
Zod and react-hook-form stay in the feature. Pass onSubmit={form.handleSubmit(fn)}.

Avoid:

A form-library wrapper. Validation stays in the feature.
Disabling Save because the form is pristine. Form does not track dirty state.
Putting a label or an icon on Input. Those belong on Field.

Design guidance lives in Forms (Blocks).

Basic form

With Prepared patterns

Wire GraphQL mutations, a failure message, and reset on success:

Shared schemas

Share Zod schemas between client and server:

When the feature already uses react-hook-form, render Field inside the controller and pass the form's submit handler to Form or the layout block. @prepared911/ui does not export a Zod resolver.

Dialog and drawer

FormDialog (@prepared911/ui/blocks/form-dialog) is the dialog shell. FormLayoutDrawer (@prepared911/ui/blocks/form-layout-drawer) is the drawer shell. Both follow Form's submit contract and ask before closing a dirty form. They do not use a modal provider or a drawer portal id.

Pending

If onSubmit returns a promise, the form is pending until it settles. useFormPending() from @prepared911/ui/form is the flag for the Save button's loading prop.

Working on features / Making a Feature

Working on features / Writing Hooks

On this page

Quick Reference

Basic form

With Prepared patterns

Shared schemas

Dialog and drawer

Pending

Forms

Form, Field, and app-owned Zod validation.

Quick Reference

Use @prepared911/ui for the controls and keep the schema in the feature:

Form from @prepared911/ui/form is the form element. It does not ship useZodForm.
Field from @prepared911/ui/field is the labeled control. FormInput is not an export.
Select from @prepared911/ui/select is the select. An empty value is null.
FormLayoutStandard, FormLayoutSectioned, FormLayoutDrawer, and FormDialog are the shells.
Zod and react-hook-form stay in the feature. Pass onSubmit={form.handleSubmit(fn)}.

Avoid:

A form-library wrapper. Validation stays in the feature.
Disabling Save because the form is pristine. Form does not track dirty state.
Putting a label or an icon on Input. Those belong on Field.

Design guidance lives in Forms (Blocks).

Basic form

With Prepared patterns

Wire GraphQL mutations, a failure message, and reset on success:

Shared schemas

Share Zod schemas between client and server:

When the feature already uses react-hook-form, render Field inside the controller and pass the form's submit handler to Form or the layout block. @prepared911/ui does not export a Zod resolver.

Dialog and drawer

Pending

If onSubmit returns a promise, the form is pending until it settles. useFormPending() from @prepared911/ui/form is the flag for the Save button's loading prop.

Working on features / Making a Feature

Working on features / Writing Hooks

On this page

Quick Reference

Basic form

With Prepared patterns

Shared schemas

Dialog and drawer

Pending