Input group
Usage
A text input with a fixed affix on one or both sides — a currency symbol, a unit, a domain suffix. The affix is part of the field rather than part of the value, so the user never has to type it and you never have to strip it back out.import { Inputgroup } from '@summonware/ui';Best practices
DoPut the invariant part in the affix. If every workspace URL ends `.summonware.app`, that belongs in `suffix`, not in the placeholder.
DoPair a numeric affix with the matching `inputMode` so mobile gets the right keypad.
Don'tPut interactive controls in an affix. It is a static label, not a button slot — use Dropdown alongside the field instead.
Anatomy
PrefixLeading affix, e.g. a currency symbol.
Control *The input itself.
SuffixTrailing affix, e.g. a unit or domain.
Examples
Common configurations, variations and states.Prefix and suffix
$USD
.summonware.app
Both sides at once for currency, and a trailing-only affix for a subdomain field.
Units
kg
minutes
Between 5 and 240.
Trailing units keep the field unambiguous without spending a hint line on it.