UX Patterns Guide
Back to compare picker

Input mask vs Text input vs Inline validation vs Autocomplete

Use an input mask only when a typed value has a stable, predictable character structure that benefits from live grouping or fixed literals while users type.

Input mask live exampleText input live exampleInline validation live exampleAutocomplete live example
Learn the decision

Match the interaction to the person's task

Use an input mask only when a typed value has a stable, predictable character structure that benefits from live grouping or fixed literals while users type.

Input mask

Use it when: The value has a stable character pattern and users benefit from live grouping.

Make this state clear: Empty untouched state with label and visible format example.

Observe the result: A user submits ABCD 123 and receives a precise error that the six-digit serial group and check digit are incomplete.

Study the full pattern →

Text input

Use it when: The answer is short and user-authored.

Make this state clear: Empty untouched state with persistent label and optional hint.

Observe the result: A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.

Study the full pattern →

Inline validation

Use it when: A single field has a specific correctable problem.

Make this state clear: Invalid field with preserved user value and adjacent correction text.

Observe the result: Validation appears after blur or submit when it helps correction.

Study the full pattern →

Autocomplete

Use it when: The list is long but values are known.

Make this state clear: Empty input state.

Observe the result: Typing filters suggestions while preserving the exact typed value.

Study the full pattern →

Practice the judgment: Imagine this situation: A fixed phone mask rejects valid international phone numbers. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension Input maskText inputInline validationAutocomplete
UI or UX UI + UX - Fixed-format text entry controlUI + UX - Single-line freeform data-entry controlUI + UX - Field-level validation feedbackUI + UX - Input widget with suggestion behavior
UI guidance Show a persistent label, visible example or hint, fixed grouping, literal separators, and field-adjacent error text so users understand which characters are typed and which are supplied by the mask.Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.Render a labeled field with hint text, field-adjacent error text, invalid styling, preserved value, and corrected state.Expose clear visual states for expanded, focused, highlighted, and selected options.
UX guidance Use an input mask to help users enter data that has a stable character structure, especially when grouping matches the physical document, card, container code, or serial key users are copying from.Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text.Help the person reach a clear task outcome.Preserve typed input and make selection reversible before submission.
Good UI A container number field shows the example ABCD 123456 7, groups pasted characters into that shape, and displays the raw value ABCD1234567 before submit.A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible.Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
Bad UI A phone field hard-codes a domestic mask and rejects valid international numbers.The only instruction is placeholder text that disappears when the user starts typing.Error message appears far from the field it describes.Placeholder-only label that disappears after typing.
Good UX A user submits ABCD 123 and receives a precise error that the six-digit serial group and check digit are incomplete.A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.Validation appears after blur or submit when it helps correction.Typing filters suggestions while preserving the exact typed value.
Bad UX A user pastes a valid value with spaces and the mask discards characters because it only supports one-character-at-a-time typing.Validation fires on the first focus event and blocks typing before the user has had a chance to answer.Showing errors before users type.Automatically forcing the first suggestion into the field.
Best fit The value has a stable character pattern and users benefit from live grouping.The answer is short and user-authored.A single field has a specific correctable problem.The list is long but values are known.
Avoid when Valid values have many lengths, regions, scripts, or exception formats.The answer is a paragraph, comment, address block, or explanation requiring multiple lines.The main recovery task is finding several errors across a submitted page.The task is open-ended query exploration.
Required state Empty untouched state with label and visible format example.Empty untouched state with persistent label and optional hint.Invalid field with preserved user value and adjacent correction text.Empty input state.
Accessibility burden Connect hint, format example, canonical-value note, and error text to the input with descriptive relationships where supported.Associate every text input with a visible label or equivalent accessible name that matches the visible question.Expose invalid state on the input and connect error text to the field description where possible.Expose combobox expanded state, active descendant, and option labels.
Common misuse Rejecting pasted values that include spaces, dashes, parentheses, or lowercase characters.Using placeholder text as the only label or instruction.Showing field errors before users have interacted with the control.Using autocomplete where users expect broad search results.

Input mask

UI or UX
UI + UX - Fixed-format text entry control
UI guidance
Show a persistent label, visible example or hint, fixed grouping, literal separators, and field-adjacent error text so users understand which characters are typed and which are supplied by the mask.
UX guidance
Use an input mask to help users enter data that has a stable character structure, especially when grouping matches the physical document, card, container code, or serial key users are copying from.
Good UI
A container number field shows the example ABCD 123456 7, groups pasted characters into that shape, and displays the raw value ABCD1234567 before submit.
Bad UI
A phone field hard-codes a domestic mask and rejects valid international numbers.
Good UX
A user submits ABCD 123 and receives a precise error that the six-digit serial group and check digit are incomplete.
Bad UX
A user pastes a valid value with spaces and the mask discards characters because it only supports one-character-at-a-time typing.
Best fit
The value has a stable character pattern and users benefit from live grouping.
Avoid when
Valid values have many lengths, regions, scripts, or exception formats.
Required state
Empty untouched state with label and visible format example.
Accessibility burden
Connect hint, format example, canonical-value note, and error text to the input with descriptive relationships where supported.
Common misuse
Rejecting pasted values that include spaces, dashes, parentheses, or lowercase characters.

Text input

UI or UX
UI + UX - Single-line freeform data-entry control
UI guidance
Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.
UX guidance
Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text.
Good UI
A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI
The only instruction is placeholder text that disappears when the user starts typing.
Good UX
A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error.
Bad UX
Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit
The answer is short and user-authored.
Avoid when
The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state
Empty untouched state with persistent label and optional hint.
Accessibility burden
Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse
Using placeholder text as the only label or instruction.

Inline validation

UI or UX
UI + UX - Field-level validation feedback
UI guidance
Render a labeled field with hint text, field-adjacent error text, invalid styling, preserved value, and corrected state.
UX guidance
Help the person reach a clear task outcome.
Good UI
Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible.
Bad UI
Error message appears far from the field it describes.
Good UX
Validation appears after blur or submit when it helps correction.
Bad UX
Showing errors before users type.
Best fit
A single field has a specific correctable problem.
Avoid when
The main recovery task is finding several errors across a submitted page.
Required state
Invalid field with preserved user value and adjacent correction text.
Accessibility burden
Expose invalid state on the input and connect error text to the field description where possible.
Common misuse
Showing field errors before users have interacted with the control.

Autocomplete

UI or UX
UI + UX - Input widget with suggestion behavior
UI guidance
Expose clear visual states for expanded, focused, highlighted, and selected options.
UX guidance
Preserve typed input and make selection reversible before submission.
Good UI
Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
Bad UI
Placeholder-only label that disappears after typing.
Good UX
Typing filters suggestions while preserving the exact typed value.
Bad UX
Automatically forcing the first suggestion into the field.
Best fit
The list is long but values are known.
Avoid when
The task is open-ended query exploration.
Required state
Empty input state.
Accessibility burden
Expose combobox expanded state, active descendant, and option labels.
Common misuse
Using autocomplete where users expect broad search results.
Decision rules
  • Prefer input mask when the accepted value has a stable character pattern, such as grouped card digits, container numbers, serial keys, or fixed-format codes.
  • Prefer text input when the value is short and freeform, or when valid answers vary too much for a mask without blocking legitimate users.
  • Prefer inline validation when the field should accept normal typing first and then explain a format problem after blur, submit, or another checkpoint.
  • Prefer autocomplete when typed characters should resolve to one known record or suggestion instead of being reformatted into a fixed literal pattern.
  • A mask must preserve normal editing, paste, selection, deletion, undo, and cursor movement; if those interactions become fragile, use text input plus validation instead.
  • Use hint text or helper text to explain complex formats because placeholder-only mask examples disappear or become hard to parse while users type.
  • Do not use a mask for email addresses, international phone numbers, company names, identifiers with valid exceptions, or any field where the mask rejects real values.
  • Do not use a mask to add a constant currency, unit, or domain string; use a prefix/suffix pattern when the constant value is separate from the typed value.
  • Do not combine a mask with a picker that owns the same format; use the picker or a plain text fallback when the picker is the primary entry path.
  • Validate the canonical unmasked value on submit and make it clear whether separators are stored, displayed only, or copied with the value.
Inspect live examples
Input maskText inputInline validationAutocomplete
Failure modes
  • A fixed phone mask rejects valid international phone numbers.
  • Pasting a complete value fails because the mask expects users to type one character at a time.
  • The mask inserts separators but the backend stores a different value without telling users.
  • Users cannot delete, select, or correct a middle group without the cursor jumping unpredictably.
  • A placeholder-only mask disappears during entry and users no longer know the expected grouping.
  • A mask is used where autocomplete should resolve to a known record ID.

Saved items