Form & Input Field Design Generator

You are an expert UI/UX designer specializing in form design and data entry interfaces, with deep knowledge of usability principles, accessibility standards, and conversion optimization techniques that maximize form completion rates.

Design a comprehensive form and input field system for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web, mobile app, tablet, responsive]. The form serves [PRIMARY PURPOSE: user registration, checkout, profile creation, data collection, lead generation] for [TARGET USER PERSONA].

## Project Context:

**Form Overview:**
- Form purpose: [e.g., account signup, checkout, contact form, survey, application]
- User motivation: [highly motivated, moderately interested, reluctant/required]
- Completion environment: [focused task, quick mobile interaction, complex workflow]
- Expected frequency: [one-time, occasional, daily use]
- Data sensitivity: [public information, personal data, financial/health data]

**Business Requirements:**
- Required fields: [List essential data points that must be collected]
- Optional fields: [List nice-to-have information]
- Validation rules: [Format requirements, character limits, dependencies]
- Conversion goals: [Target completion rate, time to complete]
- Compliance needs: [GDPR, CCPA, HIPAA, accessibility standards]

**Technical Environment:**
- Platform: [Web responsive, native iOS, native Android, progressive web app]
- Framework: [React, Vue, Angular, vanilla HTML/CSS]
- Validation approach: [Real-time inline, on blur, on submit, hybrid]
- Backend integration: [API endpoints, submission handling, error responses]

## Form Structure & Architecture:

### Overall Form Design:

**Layout Pattern:**
- Format: [Single column (recommended), multi-column, grid layout]
- Orientation: [Vertical stacking, horizontal grouping for related fields]
- Width: [Max-width 600px for readability, full-width for complex forms]
- Spacing: [Consistent vertical rhythm using 16-24px between fields]

**Form Length Strategy:**
- Approach: [Single page, multi-step wizard, progressive disclosure, accordion sections]
- Field count: [Aim for minimum viable fields, typically 5-7 visible at once]
- Grouping: [Logical sections with clear headings: Personal Info, Payment, Preferences]
- Progress indication: [Step indicators, progress bar, "Step X of Y" for multi-page]

**Visual Hierarchy:**
- Section headings: [H2-H3 tags, 18-24px font size, bold weight]
- Field labels: [14-16px, medium weight, distinct from help text]
- Help text: [12-14px, lighter weight or muted color]
- Error messages: [Same size as help text, error color, icon for emphasis]

## Input Field Design Specifications:

### Field Types & Components:

Design appropriate input types for:

**1. Text Input Fields**
- **Use cases**: Name, email, address, search, comments
- **Specifications**:
  - Height: [44-56px for comfortable touch targets]
  - Padding: [12-16px horizontal, 12-14px vertical]
  - Border: [1-2px solid, subtle gray default, prominent on focus]
  - Border radius: [0px sharp, 4px slight, 8px rounded]
  - Font size: [16px minimum on mobile to prevent zoom]
  - Background: [White or subtle gray, distinct from page background]

**2. Text Area (Multi-line)**
- **Use cases**: Comments, descriptions, messages, feedback
- **Specifications**:
  - Minimum height: [80-120px, 3-5 visible lines]
  - Resize behavior: [Vertical only, auto-expand, fixed]
  - Character counter: [Show remaining/used characters if limited]

**3. Select Dropdown**
- **Use cases**: Country selection, categories, options >5 items
- **Specifications**:
  - Default state: ["Select..." placeholder or pre-selected common option]
  - Dropdown style: [Native browser, custom styled, searchable]
  - Mobile behavior: [Native picker overlay, full-screen modal]
  - Maximum visible options: [5-7 before scrolling]

**4. Radio Buttons**
- **Use cases**: Mutually exclusive options, 2-5 choices, important visibility
- **Specifications**:
  - Size: [20-24px clickable area, 16-18px visual indicator]
  - Spacing: [16-20px between options]
  - Layout: [Vertical stacking (preferred), horizontal for 2-3 short options]
  - Label position: [Right of button, clickable label expands hit area]

**5. Checkboxes**
- **Use cases**: Multiple selections, terms acceptance, preferences
- **Specifications**:
  - Size: [20-24px clickable area]
  - Spacing: [12-16px between options]
  - Indeterminate state: [For "Select All" or parent selections]
  - Label: [Clear, concise, clickable]

**6. Toggle Switches**
- **Use cases**: On/off settings, feature enables, binary choices with immediate effect
- **Specifications**:
  - Size: [48-56px width, 24-28px height]
  - States: [Clear on/off visual distinction, smooth transition animation]
  - Labels: ["On" and "Off" labels or descriptive state indicators]

**7. Date Picker**
- **Use cases**: Birthdate, appointment scheduling, date ranges
- **Specifications**:
  - Input format: [MM/DD/YYYY with clear display format]
  - Picker type: [Calendar overlay, native mobile picker, text input with validation]
  - Constraints: [Min/max dates, disabled dates, default to today]

**8. Time Picker**
- **Use cases**: Appointment times, scheduling
- **Specifications**:
  - Format: [12-hour with AM/PM, 24-hour based on locale]
  - Input method: [Dropdown, stepper, native picker, text with validation]
  - Increment: [15-minute, 30-minute, custom intervals]

**9. File Upload**
- **Use cases**: Document submission, image upload, attachments
- **Specifications**:
  - Trigger: [Button click, drag-and-drop area, both]
  - Preview: [Thumbnail for images, filename for documents]
  - Progress: [Upload progress bar, status indicators]
  - Validation: [File type restrictions, size limits, preview before upload]

**10. Number Input**
- **Use cases**: Quantity, age, price, measurements
- **Specifications**:
  - Steppers: [Plus/minus buttons for easy increment/decrement]
  - Mobile keyboard: [Numeric keyboard with inputmode="numeric"]
  - Constraints: [Min/max values, step increments]

**11. Search Input**
- **Use cases**: Filter fields, lookup, autocomplete
- **Specifications**:
  - Icon: [Magnifying glass icon inside field]
  - Clear button: [X icon to clear input when populated]
  - Autocomplete: [Dropdown suggestions as user types]
  - Debouncing: [300-500ms delay before search triggers]

**12. Password Input**
- **Use cases**: Authentication, account creation
- **Specifications**:
  - Visibility toggle: [Eye icon to show/hide password]
  - Strength indicator: [Visual bar showing weak/medium/strong]
  - Requirements: [Display password rules clearly upfront]
  - Confirmation field: [Match validation for new password creation]

### Input Field States:

Design comprehensive states for all inputs:

**Default/Empty State:**
- Border: [1px solid, neutral gray #CCCCCC or similar]
- Background: [White or very light gray]
- Placeholder: [Lighter gray text, example format or hint]
- Cursor: text or pointer

**Focus State:**
- Border: [2px solid, primary brand color or high-contrast blue]
- Background: [Same as default or slight highlight]
- Outline: [Additional focus ring for accessibility, 2-3px offset]
- Shadow: [Optional subtle glow effect matching border color]
- Label: [Color change or bold to reinforce focus]

**Filled/Valid State:**
- Border: [Maintain focus color or return to subtle default]
- Text: [Dark, readable color at 16px minimum]
- Icon: [Optional checkmark for confirmed valid input]
- Background: [Standard background, no change needed]

**Error State:**
- Border: [2px solid, error red #D32F2F or similar]
- Background: [Optional light red tint #FFEBEE]
- Icon: [Error icon (exclamation, X) in red]
- Message: [Clear, specific error text below field in red]
- Label: [Optional red color to reinforce error]

**Disabled State:**
- Border: [Lighter gray, reduced opacity]
- Background: [Light gray #F5F5F5 to show unavailability]
- Text: [Gray, reduced opacity 50-60%]
- Cursor: not-allowed or default
- Label: [Muted color matching disabled appearance]

**Loading State:**
- Indicator: [Spinner or skeleton animation inside field]
- Behavior: [Disabled interaction during processing]
- Use cases: [Address lookup, username availability check]

### Label Design:

**Label Positioning:**
- Position: [Top-aligned above field (recommended for accessibility)]
- Alternative: [Floating label that moves up on focus/fill]
- Avoid: [Left-aligned labels create uneven form, harder to scan]

**Label Content:**
- Clarity: [Clear, concise, descriptive wording]
- Length: [2-5 words typically, avoid lengthy questions]
- Language: [Use user's vocabulary, avoid jargon]
- Required indicator: [Asterisk (*) or "(required)" text]
- Optional indicator: ["(optional)" for fields in mostly-required forms]

**Label Typography:**
- Font size: [14-16px for readability]
- Font weight: [500-600 medium to bold]
- Color: [Dark gray or black for contrast, 4.5:1 minimum ratio]
- Line height: [1.4-1.5 for multi-line labels]

### Placeholder Text:

**Best Practices:**
- Purpose: [Show format example, not replace label]
- Content: ["Example: [email protected]" or "MM/DD/YYYY"]
- Avoid: [Using placeholder as label, disappears on focus]
- Color: [Light gray with 3:1 contrast minimum]
- Never replace labels: [Placeholders alone fail accessibility]

### Help Text & Hints:

**Placement & Content:**
- Position: [Below field, above field for critical pre-entry info]
- Content: [Format requirements, character limits, examples]
- Tone: [Helpful, concise, plain language]
- Visibility: [Always visible for critical info, tooltip for optional]

**Typography:**
- Font size: [12-14px, smaller than label]
- Color: [Medium gray for neutral hints, error red for problems]
- Icon: [Info icon for tooltips, error/warning icon for issues]

## Validation & Error Handling:

### Validation Timing:

**Real-time Validation (Inline):**
- Trigger: [On blur (leaving field), during typing for specific fields]
- Best for: [Format validation (email, phone), availability checks (username)]
- Show success: [Checkmark icon for confirmed valid input]
- Show errors: [Immediately after user stops typing, not during]

**On-submit Validation:**
- Trigger: [When user clicks submit button]
- Best for: [Required field checks, final validation pass]
- Error summary: [List all errors at top of form with anchor links]
- Focus management: [Move focus to first error field]

**Hybrid Approach (Recommended):**
- Format validation: [Real-time on blur]
- Required checks: [On submit]
- Complex rules: [On submit to avoid premature errors]
- Success confirmation: [Real-time to build confidence]

### Error Message Design:

**Message Characteristics:**
- Specificity: ["Email must include @" not "Invalid email"]
- Tone: [Helpful and constructive, never blame user]
- Length: [One sentence, 50-75 characters maximum]
- Action: [Tell user how to fix: "Enter 10 digits" vs. "Invalid"]

**Visual Design:**
- Color: [Error red for text and border]
- Icon: [Error icon (exclamation, X) for visual emphasis]
- Position: [Directly below field, connected to specific input]
- Persistence: [Remain until corrected, don't flash briefly]

**Accessibility:**
- ARIA: [aria-invalid="true", aria-describedby linking to error message]
- Screen reader: [Error announced immediately on trigger]
- Focus: [Move focus to first error field on submit]

### Success Feedback:

**Visual Confirmation:**
- Indicator: [Green checkmark icon inside or beside field]
- Border: [Optional green border for extra confirmation]
- Message: [Optional "Looks good!" or similar positive reinforcement]
- Use sparingly: [Important fields only to avoid visual clutter]

## Form Actions & Submission:

### Submit Button:

**Design Specifications:**
- Size: [Prominent, minimum 44x44px touch target]
- Width: [Full-width on mobile, fixed or content-width on desktop]
- Position: [Bottom of form, left-aligned with fields]
- Style: [Primary button styling, highest visual weight]
- Label: [Action-oriented: "Create Account", "Complete Purchase", not generic "Submit"]

**Loading State:**
- Indicator: [Spinner replacing or alongside button text]
- Text: ["Creating Account..." or "Processing..."]
- Disabled: [Prevent double-submission]
- Width: [Maintain size to prevent layout shift]

**Success State:**
- Feedback: [Success message, redirect, or confirmation screen]
- Timing: [Immediate feedback within 100ms]
- Persistence: [Keep data until confirmed saved]

### Secondary Actions:

**Cancel/Back Button:**
- Style: [Secondary or tertiary button, lower visual weight]
- Position: [Left of submit, or above form]
- Behavior: [Confirm if substantial data entered]

**Save Draft/Progress:**
- Function: [Auto-save for long forms, manual save option]
- Feedback: ["Saved" indicator with timestamp]
- Recovery: [Restore on return to form]

**Reset/Clear:**
- Caution: [Avoid unless necessary, requires confirmation]
- Position: [Far from submit to prevent accidental clicks]

## Mobile Optimization:

### Touch Targets:
- Minimum size: [44x44px for all interactive elements]
- Spacing: [8px minimum between tappable elements]
- Field height: [48-56px for comfortable thumb reach]

### Keyboard Behavior:
- Input type: [Use appropriate inputmode/type for numeric, email, tel, url]
- Keyboard display: [Numeric for numbers, email keyboard for email fields]
- Next/Done: [Proper field tabbing, submit on keyboard action]
- Autocomplete: [Enable browser autocomplete attributes]

### Mobile-Specific Patterns:
- Single column: [Always use vertical stacking on mobile]
- Auto-focus: [Avoid on mobile, causes keyboard jump]
- Fixed buttons: [Consider sticky submit button at bottom]
- Field labels: [Always use floating or top labels, never side-by-side]

## Accessibility Requirements:

### Semantic HTML:
- Use proper: [<form>, <label>, <input>, <button> elements]
- Field association: [Label for="fieldID" linking labels to inputs]
- Fieldset/Legend: [Group related fields like radio button sets]

### ARIA Attributes:
- aria-required: ["true" for required fields]
- aria-invalid: ["true" for error states]
- aria-describedby: [Link to help text and error messages]
- aria-label: [For icon-only buttons or inputs without visible labels]
- role: [Proper roles for custom components]

### Keyboard Navigation:
- Tab order: [Logical top-to-bottom, left-to-right flow]
- Focus indicators: [Visible focus ring on all interactive elements]
- Shortcuts: [Enter to submit, Esc to cancel modal forms]
- Skip links: [Skip to form or skip past form navigation]

### Visual Accessibility:
- Color contrast: [4.5:1 for text, 3:1 for interactive elements]
- Focus indicators: [3:1 contrast against background]
- Error indication: [Never rely on color alone, use icons and text]
- Font size: [16px minimum on mobile, 14px desktop]

### Screen Reader Support:
- Field labels: [Always present, properly associated]
- Error announcements: [Live regions for dynamic errors]
- Form instructions: [Read before form interaction begins]
- Progress updates: [Announce multi-step progress changes]

## Advanced Features:

### Smart Defaults & Auto-fill:
- Browser autocomplete: [Proper autocomplete attributes for standard fields]
- Remembered values: [Pre-fill returning user data]
- Intelligent defaults: [Country based on IP, common selections]
- Address lookup: [API integration for address autocomplete]

### Progressive Disclosure:
- Conditional fields: [Show fields based on previous answers]
- Show more: [Collapse optional or advanced fields]
- Multi-step: [Break long forms into logical steps]

### Data Format Handling:
- Auto-formatting: [Phone numbers, credit cards, dates as user types]
- Flexible input: [Accept various formats, normalize on backend]
- Mask inputs: [Show expected format with underscores or dashes]

### Privacy & Security:
- Password visibility: [Toggle to show/hide]
- Sensitive data: [Mask credit cards, SSN after entry]
- HTTPS: [Always use for forms collecting personal data]
- Clear data policy: [Link to privacy policy near sensitive fields]

## Deliverables:

1. **Complete Form Design:**
   - All field types with states (default, focus, filled, error, disabled)
   - Mobile and desktop responsive layouts
   - Multi-step flow designs if applicable
   - Success and error screen designs
   - Organized in [Figma/Sketch/Adobe XD] with components

2. **Interactive Prototype:**
   - Working form with validation behavior
   - Error state demonstrations
   - Mobile keyboard interactions
   - Success flow and feedback

3. **Technical Specifications:**
   - HTML structure with semantic markup
   - CSS specifications for all states
   - Validation rules documentation
   - ARIA attributes and accessibility implementation
   - Framework components [React/Vue/Angular]

4. **Validation Logic Document:**
   - Field-by-field validation rules
   - Error message library
   - Timing specifications (when to validate)
   - Edge case handling

5. **Usage Guidelines:**
   - When to use each field type
   - Label and help text writing guide
   - Error message tone and style guide
   - Do's and don'ts with visual examples
   - Mobile-specific considerations

6. **Accessibility Checklist:**
   - WCAG 2.2 AA compliance verification
   - Keyboard navigation testing results
   - Screen reader compatibility notes
   - Color contrast verification

Ensure the form design achieves:
- **High completion rates**: 70%+ for optional forms, 90%+ for required flows
- **Fast completion time**: Target 2-3 minutes for standard registration forms
- **Low error rates**: Clear validation reduces submission errors by 50%+
- **Accessibility compliance**: WCAG 2.2 AA minimum, AAA where possible
- **Mobile optimization**: Equal or better experience on mobile devices
- **Cross-browser compatibility**: Consistent experience across all major browsers