🎨

Accessible Form Builder with Validation

Build fully accessible forms with client and server validation

Intermediate🎨 FrontendAll Models
prompt template
Build an accessible form component for this use case:

**Form purpose:** [FORM_PURPOSE — e.g., "user registration", "checkout", "settings"]
**Fields:** [LIST_FIELDS — e.g., "email, password, confirm password, name, phone"]
**Validation rules:** [RULES — e.g., "email must be valid, password 8+ chars with special char"]

Requirements:
1. **WCAG 2.1 AA compliant** — proper labels, aria attributes, focus management
2. **Progressive validation** — validate on blur, show errors inline
3. **Error summary** — accessible error list at top with links to fields
4. **Keyboard navigation** — tab order, Enter to submit, Escape to cancel
5. **Loading states** — disable form during submission, show spinner
6. **Server error handling** — display API errors mapped to specific fields
7. **TypeScript types** — fully typed form state and validation schema

Use React Hook Form + Zod for validation. Include unit tests for validation logic.

How to Use This Prompt

  1. 1Copy the prompt template above
  2. 2Paste into Claude, ChatGPT, or Cursor
  3. 3Replace [bracketed placeholders] with your specific project details
  4. 4Iterate on the AI output to refine and customize the results