🎨

Accessible Form with Validation

Build a form with proper accessibility, validation, and error handling

Intermediate🎨 FrontendAll Models
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

  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