UX Patterns Guide
Back to compare picker

Input mask vs Text input vs Inline validation vs Autocomplete

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.

Input mask live exampleText input live exampleInline validation live exampleAutocomplete live example

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.Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
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.Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.Help users correct a specific field without losing or re-entering the value they already typed.Help users complete a known value faster without forcing an incorrect suggestion.
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.Only a red border with no message.Placeholder-only label that disappears after typing.
Good UX A user pastes abcd1234567, sees ABCD 123456 7, reviews the canonical value, and fixes one middle digit without retyping the whole code.A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.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.Neutral field with label, hint, and no error.Empty input state.
Accessibility burden Keep a real visible label and do not use the mask pattern or placeholder as a substitute for the field name.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 Using a mask because a format exists even though many valid values do not fit it.Using placeholder text as the only label or instruction.Showing field errors before users have interacted with the control.Forcing the first suggestion when the user did not choose it.

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 pastes abcd1234567, sees ABCD 123456 7, reviews the canonical value, and fixes one middle digit without retyping the whole code.
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
Keep a real visible label and do not use the mask pattern or placeholder as a substitute for the field name.
Common misuse
Using a mask because a format exists even though many valid values do not fit it.

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
Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
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 types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
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 users correct a specific field without losing or re-entering the value they already typed.
Good UI
Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible.
Bad UI
Only a red border with no message.
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
Neutral field with label, hint, and no error.
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
Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
UX guidance
Help users complete a known value faster without forcing an incorrect suggestion.
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
Forcing the first suggestion when the user did not choose it.
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.