component-create-form

Form Component Creation Request

Please create a new form component following our specialized form patterns and validation standards:

🎯 FORM CREATION OBJECTIVES:

1. IMPLEMENT comprehensive validation using Zod schemas with real-time feedback
2. ENSURE accessibility compliance with proper ARIA attributes and form semantics
3. INTEGRATE with NextJS patterns including server actions and form submission flows
4. PROVIDE excellent UX with loading states, error handling, and success feedback
5. FOLLOW project standards for TypeScript, testing, and component architecture

📋 FORM DEVELOPMENT METHODOLOGY:

STEP 1: Form Planning and Architecture

Determine Form Type and Location:

• Client Component: src/components/client/forms/ - Forms with real-time validation, dynamic inputs
• Server Component Integration: Use with server actions for form submission
• Form Categories:
  • Authentication Forms: Login, register, password reset (auth/)
  • User Input Forms: Profile updates, settings, preferences (user/)
  • Content Forms: Contact, feedback, support requests (content/)
  • Data Entry Forms: Complex multi-step forms (data/)

Form Complexity Assessment:

• Simple Forms: Single-step, basic validation (contact forms, login)
• Complex Forms: Multi-step, conditional fields, file uploads
• Dynamic Forms: Fields that change based on user input
• Validation Requirements: Real-time, server-side, custom validation rules

STEP 2: Schema and Validation Design

Zod Schema Definition:

// Define comprehensive validation schema
const FormSchema = z.object({
  email: z.string()
    .email('Please enter a valid email address')
    .min(1, 'Email is required'),
  password: z.string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, 'Password must contain uppercase, lowercase, and number'),
  confirmPassword: z.string()
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"],
});

type FormData = z.infer<typeof FormSchema>;