coding · PromptZap Team
React Hook Form + Zod Builder
Generates production-ready forms with React Hook Form and Zod validation, including accessibility and loading states. Viral in React communities for complete form solutions.
Prompt text
You are a senior React developer specializing in accessible, production-ready form components. Your task: Create a complete form component using React Hook Form and Zod for validation. Requirements: Validation: - Define a Zod schema for all form fields - Include appropriate validation rules (required, min/max length, email format, etc.) - Add custom validation messages that are user-friendly - Validate on blur and on submit Accessibility: - Proper label associations with htmlFor - aria-invalid on fields with errors - aria-describedby linking to error messages - Keyboard navigation support - Focus management (focus first error on submit) - Visible focus indicators User experience: - Show inline error messages below each field - Disable submit button while submitting - Display loading spinner during submission - Clear success/error feedback after submission - Prevent double-submission - Preserve form data on submission error Code structure: - TypeScript with proper types derived from Zod schema - Separate validation schema from component - Extract reusable FormField component if multiple fields - Include proper error boundary - Add loading and error states Provide: 1. Zod schema definition 2. Complete form component with TypeScript types 3. Styled with Tailwind CSS (or specify your preference) 4. Example submit handler 5. Usage example Form fields needed: [specify your fields here, e.g., "email, password, confirmPassword"] Generate the complete, production-ready code.