Single-question page
A sequential service flow needs reliable answers before deciding the next page.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardFocused form page for one answer or decision
Test in lab 34 documented entries 1 anti-pattern check
Input And Data Entry
Forms, field behavior, uploads, dates, addresses, payment entry, and account data.
Browse all problem familiesLearn the family
What information does the service need, and how can a person provide it accurately?
An input pattern carries a question, an expected answer, and a consequence. Visible labels, suitable controls, tolerant entry, and specific recovery keep that agreement clear.
Use this method
- State why each answer is needed.
- Choose a field that matches the answer and its format.
- Provide visible help before entry and precise correction after a problem.
- Preserve the answer through review and submission.
Compare the outcome
Strong: A refund form names each bank field, accepts pasted spacing, explains a mismatch, and shows a masked review.
Weak: A refund form asks for all bank information in one box, then shows a generic error after submission.
Try it: Choose one form field and write its purpose, label, accepted values, error response, and review state.
Read these patterns first
- Text inputThe answer is short and user-authored.
- Inline validationA single field has a specific correctable problem.
- Bank detailsThe product needs bank account details to send money, collect money, set up payroll, save payout details, issue refunds, or initiate bank-to-bank payments.
Complete study route · 34 entries
Work through the family in order
Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.
0 of 34 studies complete
Start this family →7 entries
Build the foundation
Learn the shared task and the core interaction choices.
Text input
The answer is short and user-authored.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle-line freeform data-entry control
Test in lab Textarea
Users need to write sentences, paragraphs, comments, explanations, notes, or descriptions.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardMulti-line freeform writing field
Test in lab Single-page form
A compact set of related fields should be reviewed together before one submit.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardShort related multi-field submission page
Test in lab Inline validation
A single field has a specific correctable problem.
- Type
- UI-UX
- Sources
- 2
- Trail checked
standardField-level validation feedback
Test in lab Review before submit
A user has provided multiple answers and should verify them before a consequential submit action.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardFinal editable answer summary before committing a transaction
Test in lab Bank details
The product needs bank account details to send money, collect money, set up payroll, save payout details, issue refunds, or initiate bank-to-bank payments.
- Type
- UI-UX
- Sources
- 6
- Trail checked
standardSecure bank account identification and verification form
Test in lab 26 entries
Apply the patterns
Choose a specialized form for the context and follow its complete behavior.
Name entry
The product must capture a person's name for display, correspondence, booking, application, payment, account details, identity matching, support, or official records.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardPersonal-name capture field or field group
Test in lab Email address entry
The product must capture an email address for contact, receipt, notification, invitation, account identifier, recovery, or verification.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardContactable email address capture field
Test in lab Phone number entry
The product must capture a phone number for calls, texts, support callbacks, appointment changes, recovery, delivery coordination, verification, or contact records.
- Type
- UI-UX
- Sources
- 6
- Trail checked
standardCallable telephone contact capture field
Test in lab Address entry
The product needs a complete postal, delivery, billing, service, or official contact address.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardStructured postal or contact address capture flow
Test in lab Date input
Users already know the exact date or can look it up easily.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardGrouped manual exact-date entry
Test in lab Date picker
Users are scheduling, booking, planning, or selecting a recent or future date.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle-date text field with attached calendar menu
Test in lab Time picker
Users choose appointment, meeting, delivery, pickup, reminder, or service times.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardTime input with filtered slot list, period selector, and timezone selector
Test in lab Date range picker
Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardTwo date fields with attached range calendar and apply controls
Test in lab Input prefix/suffix
The value has a fixed currency, unit, percentage, domain, or commonly understood icon.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedText input with constant visual affix
Test in lab Input mask
The value has a stable character pattern and users benefit from live grouping.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedFixed-format text entry control
Test in lab Character count
A legal, editorial, messaging, moderation, or display constraint imposes a clear maximum length.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardBounded text-entry length feedback
Test in lab Password input
The user needs to enter an existing password, passphrase, or PIN-like memorized secret.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardAuthentication secret entry control
Test in lab Password creation
The user is creating an account with a reusable password.
- Type
- UI-UX
- Sources
- 7
- Trail checked
standardNew authentication secret selection flow
Test in lab Payment card entry
Users need to pay with a credit, debit, prepaid, or network card.
- Type
- UI-UX
- Sources
- 6
- Trail checked
standardSecure card payment capture and verification form
Test in lab File upload
The service needs a document, image, scan, spreadsheet, media file, or other original file.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardFile selection and attachment control
Test in lab Drag-and-drop upload
Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardDrop-zone file upload enhancement with file input fallback
Test in lab Autocomplete
The list is long but values are known.
- Type
- UI-UX
- Sources
- 2
- Trail checked
standardInput widget with suggestion behavior
Test in lab Dependent fields
A downstream field's valid values or requirement depend on a previous answer.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedControlling and dependent form fields
Test in lab Conditional reveal fields
A selected radio, checkbox, or select option needs one short related follow-up field.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedTrigger-owned follow-up form field
Test in lab Multi-step form
A transaction spans several ordered pages or sections.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardMulti-page transaction with saved step state
Test in lab Wizard
A setup, import, object creation, or configuration task has strict sequencing.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardGuided sequential setup assistant
Test in lab Complete complex form
A product configuration has many related fields across named sections.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedSectioned enterprise configuration form
Test in lab Draft state
Users need to pause and resume unfinished work across sessions, devices, or routes.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedUnpublished object version lifecycle
Test in lab Autosave form
Users spend meaningful time entering form content or application progress.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedBackground-saving form progress
Test in lab Inline edit
Users frequently update one visible value or one row property.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedIn-place value or row editing
Test in lab Bulk import
Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedStructured file import workflow with mapping, validation, repair, and result reporting
Test in lab 1 entries
Review the quality risks
Study failure cases and identify the better recovery route.
Required field hidden by conditional logic
Use it during design and QA reviews of eligibility, account, checkout, consent, benefits, healthcare, enterprise configuration, and onboarding forms with conditional branches.
- Type
- UI-UX
- Sources
- 5
- Trail checked
anti-patternAnti-pattern where required form data is hidden or unreachable because conditional state and validation disagree
Test in lab Try another phrase
Try fewer words, clear the filter, or search across all pattern families.
Search all patterns