Button form-001
A clickable element that triggers an action. Use for primary actions, form submissions, and confirmations.
Reference · UX pattern catalogueForm patterns
36 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/form-patterns.json.
Components
Checkbox form-002
A box you tick to turn an option on or off. Use for multiple selections from a list or boolean toggles.
Combobox form-003
A search box that filters and suggests options as you type. Use for selecting from large lists (10+ items) like countries or tags.
Date Picker form-004
A calendar popup for picking dates. Use for date selection, date ranges, and scheduling.
Form form-005
A group of fields the user fills in and submits. The foundation for any structured data collection.
Input form-006
A text field where users type short text like names, emails, or search queries.
Input OTP form-007
Separate boxes for entering a verification code. Auto-advances on digit entry and supports paste.
Label form-008
Text that describes what a form field is for. Every input must have one.
Radio Group form-009
A set of options where you pick exactly one. Use for mutually exclusive choices with 2–5 visible options.
Select form-010
A dropdown list for picking one option from 3–10 choices where space is limited.
Slider form-011
A draggable handle for picking a value within a range, like price or volume.
Switch form-012
An on/off toggle that takes effect immediately. Use for settings like dark mode or notifications.
Textarea form-013
A larger text box for writing longer content like descriptions, comments, or messages.
Toggle form-014
A button that stays pressed or released. Use for formatting tools like bold/italic or view mode switching.
Toggle Group form-015
A row of buttons where you pick one (or multiple). Use for view switchers or filter groups.
File Upload form-016
A button or drop zone for uploading files. Always provide a button alternative alongside drag-and-drop.
Validation
Inline Validation form-017
Validate on blur (not on keystroke). Show success checkmarks for valid fields and error messages inline below the field. Never clear the field on error.
Error Summary form-018
Show a summary box at the top of the form listing all errors on failed submission. Each error links to the corresponding field.
Focus on First Error form-019
On submission failure, automatically focus the first invalid field and scroll it into view. Never focus the submit button on error.
Error Message Clarity form-032
Error messages must say what went wrong AND how to fix it. Use specific language, not generic. Red color + icon, not color alone.
Autocomplete
Autocomplete Tokens form-020
Set the autocomplete attribute on every standard form field (name, email, tel, address, cc-number). Browsers auto-fill known values, reducing effort by 30-50%.
Address Autocomplete form-021
Integrate address lookup (Google Places API or similar) to auto-fill city, state, and zip from partial address input. Pre-select country from locale.
Smart Defaults form-031
Pre-fill fields with the most common or contextually relevant values. Use browser autofill attributes. Default to the most popular option in select fields.
Enhancement
Password Strength form-022
Entropy-based strength meter for password creation. Show as a colored bar (red → yellow → green) with a specific requirements checklist.
Password Reveal form-023
Eye icon toggle that switches between type="password" and type="text". Essential on mobile where autocorrect can corrupt hidden passwords.
Character Counter form-024
Show remaining or used characters as "42/280" below the field. Warn when approaching the limit. Never silently truncate input.
Input Masking form-025
Format inputs like phone numbers and credit cards on blur, not during typing. Accept flexible user input and normalize server-side.
Structure
Multi-Step Form form-026
Break forms with 7+ fields into 3-5 logical steps. Show progress indicator. Validate per step. Persist progress. Allow back navigation.
Conditional Fields form-027
Show or hide fields based on previous answers. Use the collapse/expand animation pattern. Clear hidden field values on parent change.
Fieldset Grouping form-028
Wrap related field groups (address, payment, personal info) in <fieldset> with <legend>. Provides context for screen readers.
Required/Optional Marking form-029
Mark the minority: if most fields are required, mark optional ones as "(optional)". If most are optional, mark required ones with an asterisk.
Single-Column Layout form-030
Stack all fields in a single column. Left-align labels above fields. Never use multi-column form layouts — they cause 28% more errors.
Field Count Optimization form-033
Audit every field — remove any not strictly required. If a field can be derived later, skip it. Target 3-5 fields for signup forms.
Guest Checkout form-034
Never require account creation to complete a purchase. Offer guest checkout as the default, with optional account creation after payment.
Resilience
Auto-Save Draft form-035
Save form state to localStorage on debounce (2-5 seconds). Show a "Saved" indicator. Restore on page reload. Essential for long forms.
Form Recovery form-036
Persist form state to localStorage on every change. Restore on page reload. Show a "Recovered draft" banner with option to discard.