Masked input
Usage
Formats digits into a fixed pattern as the user types — `#` marks a digit slot in `mask`, everything else is a literal inserted automatically. Small enough to own directly rather than adding a masking library for a handful of real-world patterns (phone, card, date).import { MaskedInput } from '@summonware/ui';Best practices
DoShow the mask shape in the placeholder (`(___) ___-____`) — the component does this automatically from `mask`, so just set a sensible `mask`.
Don'tUse this for free-text fields that merely look structured (an address, a name). A mask fights the user the moment real data does not fit its exact shape.
Examples
Common configurations, variations and states.Phone number
US format
Digits auto-format into the mask shape as you type.