Input prefix or suffix.
Shows context such as currency or units alongside a value.
See it in context
What it is
An affix sits inside or next to the input boundary while remaining separate from the editable value. It can explain whether the value means dollars, kilograms, or a web address prefix.
When to use it
Keep units visible and include them in the field’s accessible description.
Know the difference
A placeholder disappears while typing; a prefix or suffix remains visible with the value.
Across platforms
Web
Use a labeled native input and its appropriate type, inputmode, and autocomplete hints. Browser presentation and the available autofill UI vary.
iOS · iPadOS · Android
Choose the keyboard and content type for the value being entered. Keep the field visible above the on-screen keyboard and preserve the user’s selection.
macOS · Windows · Linux
Support ordinary keyboard editing, selection, paste, and undo. A desktop field should not depend on a touch-only accessory keyboard.
Go to the source
Primary documentation for the pattern and its platform conventions.