Foundations

Autoscale Input

A numeric field that formats as you type and shrinks its type to keep the whole amount in view.

Stake

Type past the width and the amount scales down to stay on one line.

Try entering a number
$
value=""

Number formats

The locale sets group and decimal separators; a typed period always means decimal.

locale="en-US" · 1,234,567.89 (US)
$
locale="de-DE" · 1.234.567,89 (DE)
 €
locale="fr-FR" · 1 234 567,89 (FR)
 €
locale="en-IN" · 12,34,567.89 (IN)
₹

Bounds

maxWidth sets the fit and minSize the floor; past it the field scrolls.

maxWidth=320 · 16–64px
$/year
maxWidth=320 · 16–64px
$/year
maxWidth=200 · 20–48px
$/year
pnpm dlx shadcn@latest add https://betui.fyi/r/autoscale-input.json

Code