Form Systems & Input Patterns

Build accessible, user-friendly forms with systematic component selection, validation strategies, and UX best practices.

Purpose

Forms are the primary mechanism for user data input in web applications. This skill provides systematic guidance for:

• Selecting appropriate input types based on data requirements
• Implementing validation strategies that enhance user experience
• Ensuring WCAG 2.1 AA accessibility compliance
• Creating complex patterns (multi-step wizards, conditional fields, dynamic forms)

When to Use This Skill

Triggers:

• Building contact forms, login/registration flows, checkout processes
• Implementing surveys, questionnaires, or settings pages
• Adding validation to user inputs
• Creating multi-step workflows or wizards
• Ensuring form accessibility
• Collecting structured data (addresses, credit cards, dates)

Common Requests:

• "Create a registration form with validation"
• "Build a multi-step checkout flow"
• "Add inline validation to email input"
• "Make this form accessible for screen readers"
• "Implement a survey with conditional questions"

Universal Form Concepts

Component Selection Framework

The Golden Rule: Data Type → Input Component → Validation Pattern

Start by identifying the data type to collect, then select the appropriate component:

Quick Reference:

• Short text (<100 chars) → Text input, Email input, Password input
• Long text (>100 chars) → Textarea, Rich text editor, Code editor
• Numeric → Number input, Currency input, Slider
• Date/Time → Date picker, Time picker, Date range picker
• Boolean → Checkbox, Toggle switch
• Single choice → Radio group (2-7 options), Select dropdown (>7 options), Autocomplete (>15 options)
• Multiple choice → Checkbox group, Multi-select, Tag input
• File/Media → File upload, Image upload
• Structured → Address input, Credit card input, Phone number input