Skip to content
managing-complex-forms logo

Complex Form Management

managing-complex-forms

Best practices for handling long forms using React Hook Form and Zod. Use for booking, profile updates, or tour creation.

SKILL.md

Full skill instructions

Complex Form Management

When to use this skill

  • Multi-step booking forms.
  • User profile editing.
  • Admin tour creation dashboard.

Tools

  • React Hook Form: For state and performance.
  • Zod: For schema validation.
  • Shadcn Form: For UI integration.

Workflow

  • Define Zod schema.
  • Initialize useForm with resolver.
  • Wrap components in <Form>.
  • Handle submission with Loading state.

Instructions

  • Inline Validation: Show errors immediately on blur or change.
  • UX: Use stepper for very long forms.