Input group
An input with adornments — a currency prefix, a unit suffix, an inline action button. Used for money, percentages, search.
Prefix / suffix
$
Money input
%
Percent input
Search input
Copy URL
Inline action
Pair an input with a tightly-coupled action — copy, paste, generate, regenerate.
huchu.app/
Do & don't
Do
Use the prefix for the unit ("$", "%", "@") — it leaves the input field for just the value.
Don't
Cram more than one adornment per side. Two suffixes is a redesign.
Do
Right-align numbers and money.
Don't
Animate the adornment on focus. It should sit still.