Use input prefix/suffix when a constant symbol, unit, abbreviation, or icon clarifies the value while the user's typed value should remain clean.
Use input prefix/suffix when a constant symbol, unit, abbreviation, or icon clarifies the value while the user's typed value should remain clean.
Practice the judgment: Imagine this situation: The visible suffix says lbs but the label only says Weight, so screen reader users miss the unit. 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 →| Dimension | Input prefix/suffix | Input mask | Text input | Inline validation |
|---|---|---|---|---|
| UI or UX | UI + UX - Text input with constant visual affix | UI + UX - Fixed-format text entry control | UI + UX - Single-line freeform data-entry control | UI + UX - Field-level validation feedback |
| UI guidance | Render the prefix before the input or suffix after the input as a non-editable visual affix, with a persistent label or hint that names the unit or symbol in text. | 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. |
| UX guidance | Use a prefix or suffix to reduce ambiguity when users must enter only the value and the unit, currency, percentage, or domain is fixed. | 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. |
| Good UI | A Cost, in dollars field shows a dollar prefix outside the input, uses numeric input, and stores only the numeric amount. | 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. |
| Bad UI | A suffix contains a long phrase that wraps into the input and looks like typed text. | 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. |
| Good UX | A user types $1,250 into a field with a dollar prefix and the form normalizes it to 1250 with a clear status message. | 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. |
| Bad UX | A user types lbs after a weight value because they missed the suffix, then gets an error instead of normalization. | 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. |
| Best fit | The value has a fixed currency, unit, percentage, domain, or commonly understood icon. | 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. |
| Avoid when | The unit or currency is user-selectable and needs its own control. | 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. |
| Required state | Empty state with descriptive label and visible prefix or suffix. | 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. |
| Accessibility burden | If affixes are hidden from screen readers, ensure the accessible name and description remain complete. | 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. |
| Common misuse | Relying on a visually hidden or decorative affix as the only way users know the unit. | 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. |