🎨
Accessible Form with Validation
Build a form with proper accessibility, validation, and error handling
prompt template
Create a [FORM_TYPE] form in React with these fields: [LIST_YOUR_FIELDS — e.g., "name (required), email (required, valid email), message (required, min 20 chars), budget (optional, dropdown)"] Requirements: - TypeScript with strict types for form data - Client-side validation with clear error messages - Accessible: proper labels, aria-describedby for errors, focus management - Show inline errors below each field on blur and on submit - Disable submit button while submitting (show spinner) - Success state after submission - Use React Hook Form or native form handling (no heavy libs) - Tailwind CSS styling with focus-visible rings - Keyboard navigable (Tab order, Enter to submit) Handle these edge cases: - Trim whitespace from text inputs before validation - Prevent double submission - Show a generic error banner if the server request fails Return the complete component with a mock submit handler.
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
🎨
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Intermediatelanding-pagenext.js
🎨
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Beginnerreacttailwind
🎨
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Beginnervibe-codingprototyping
🎨
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
🧪
TestingPRO
Accessibility Testing Automation
Use this prompt to accessibility testing automation with AI assistance
Shared:accessibilitya11y
♻️
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