Input prefix/suffix

Problem Context

• The field asks for a value with a fixed unit, symbol, abbreviation, or icon meaning.
• The affix is common enough to clarify the value without a long explanation.
• The user should enter only the value, not the unit or symbol.
• The backend expects a canonical value and unit rather than an arbitrary combined string.
• Screen reader and voice users still need the unit or symbol in the label or hint because the visual affix may be hidden.

Selection Rules

• Choose input prefix/suffix when a common fixed symbol, unit, abbreviation, domain, or icon clarifies what the text input accepts.
• Use ordinary text input when the answer is open-ended or the affix would over-constrain legitimate responses.
• Use input mask when the value itself needs live character grouping, inserted literals, or fixed slots.
• Use inline validation when the field can accept normal text first and only needs a correction message after interaction.
• Use select, radio group, or segmented control when users must choose between multiple units or currencies.
• Use hint text instead of an affix when the explanation requires more than a short, common symbol or abbreviation.
• Keep the affix outside the submitted editable value unless the product explicitly stores a formatted display string.
• Name the unit or symbol in the label or hint because assistive technologies may not announce decorative affixes.
• Allow users to type the visible prefix or suffix and normalize it when unambiguous.
• Place validation state on the whole input group so the affix and text field read as one field.

Required States

• Empty state with descriptive label and visible prefix or suffix.
• Focused state where the input and affix read as one field group.
• Filled state with the user's clean value and visible affix.
• Duplicate affix typed state normalized without an unnecessary error.
• Invalid numeric or missing value state with group-level error styling.
• Success state showing accepted canonical value and unit.
• Disabled or readonly state where the affix remains visually associated with the value.
• Changed-unit state when another control changes which affix is active.
• Mobile state with correct keyboard for the clean value.
• Assistive state where the label or hint communicates the affix meaning.

Interaction Contract

• The affix is visible near the input but not editable as part of the field value.
• Typing, paste, selection, undo, and deletion affect only the user's value, not the affix.
• If the user types the same affix, the system normalizes it or preserves the value with a clear, fixable message.
• Submitting validates the canonical value and unit together.
• Errors and success states apply to the input group, not only the inner input border.
• Changing unit mode updates the label, hint, affix, validation, and payload together.
• Copying the field value has a documented behavior: clean value only or formatted value, but not inconsistent by field.

Implementation Checklist

• Define the clean value, affix text or icon, unit metadata, submitted payload, accepted duplicate-affix forms, and copy behavior.
• Put the affix outside the input element and keep it visually grouped with the control.
• Use a visible label or hint that names the unit, currency, percentage, or icon meaning in text.
• Set inputmode, type, pattern, width, autocomplete, and validation for the clean value without the affix.
• Normalize common duplicate inputs such as $1200, 1200 dollars, 12%, or 12 percent when the affix already represents that unit.
• Apply error, success, disabled, readonly, and focus styles to the whole input group.
• Test screen readers, voice input, paste, browser autofill, mobile keyboards, forced colors, zoom, RTL layouts, and backend parsing.

Common Generated-UI Mistakes

• Relying on a visually hidden or decorative affix as the only way users know the unit.
• Rejecting values that include the same prefix or suffix users saw next to the field.
• Using a prefix or suffix for an open-ended answer that may not use that unit.
• Putting long explanatory copy in the affix instead of the hint.
• Storing the affix in one payload but stripping it in another.
• Using a static suffix when users can change the unit elsewhere.
• Making an icon affix ambiguous without a text label or hint.

Critique Questions

• Is the affix a fixed, common symbol or unit that users will understand?
• Does the label or hint communicate the same meaning without relying on the visible affix?
• What happens when users type or paste the affix into the value?
• What exact value and unit does the backend receive?
• Would a mask, picker, unit select, hint, or ordinary text input be less ambiguous?
• Do error and disabled states visually include the affix?