🎨
Accessible Form Builder with Validation
Build fully accessible forms with client and server validation
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
- 1Copy the prompt template above
- 2Paste into Claude, ChatGPT, or Cursor
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
🎨
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Beginnervibe-codingprototyping
🎨
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Beginnerreacttailwind
🎨
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Intermediatelanding-pagenext.js
🎨
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
Beginnerreactinfinite-scroll
You Might Also Like
Prompts from other categories that share similar tags
⚙️
Backend
Request Validation Middleware
Use this prompt to request validation middleware with AI assistance
Shared:validationzod
♻️
Refactoring
Extract Shared Hook from Components
Identify duplicated logic across components and extract into a reusable hook
Shared:react
🔒
Security
Input Sanitization Library
Build a comprehensive input sanitization layer for user-submitted data
Shared:validation
⚙️
BackendPRO
Server-Sent Events Real-Time Feed
Implement real-time updates using Server-Sent Events without WebSocket complexity
Shared:react
Keep Exploring the Vault