Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Working On Features
  2. Forms

Forms

Form handling with @prepared911/ui-forms, React Hook Form, and Zod validation.

Quick Reference

Use @prepared911/ui-forms + Zod:

  • useZodForm for typed, schema-driven validation (onBlur by default)
  • Form* wrappers instead of manual register + error wiring
  • Exported schema builders (emailSchema, phoneSchema, …) for common masked fields
  • Localized validation via i18n keys in Zod message values

Avoid:

  • New forms built with raw register and manual errors.field?.message
  • English-only validation strings in Zod
  • Mixing FormInput and register on the same field
  • Browser-native validation (Form sets noValidate by default)

Design guidance, shell selection, and field maps live in Forms (Blocks).

Basic form

With Prepared patterns

Wire GraphQL mutations, logging, and reset on success:

Shared schemas

Share Zod schemas between client and server:

Modal and drawer forms

Sectioned forms

Settings autosave

SettingsRow reads useFormContext — wrap rows in Form (not a submit shell):

Dynamic form fields

Use useFieldArray with FormInput and explicit control:

Async validation

Debounced field submit

Multi-step forms

Keep separate useZodForm instances per step or merge schemas at the final submit. Store partial data in component state between steps; reset each step form with defaultValues from accumulated data.

File uploads

Testing forms

Related Documentation

  • Forms (Blocks) — design usage, shells, and field map
  • Forms API — props, previews, and schema builders
  • State Management — form state with contextual stores
  • Writing Hooks — custom hooks for form logic
  • Unit Testing — RTL patterns

Reference Files

  • react-forms SKILL.md — foundational RHF + Zod patterns; prefer ui-forms wrappers for new work
  • Package README: turbo/packages/ui-forms/README.md

Previous

Working on features / Making a Feature

Next

Working on features / Writing Hooks

On this page

Quick Reference
Basic form
With Prepared patterns
Shared schemas
Modal and drawer forms
Sectioned forms
Settings autosave
Dynamic form fields
Async validation
Debounced field submit
Multi-step forms
File uploads
Testing forms
Related Documentation
Reference Files