Autoscale Input
Input that binary-searches a font size so the value always fills the available width, with locale number formats.
7.9 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-autoscale-inputUsage
Code
import { AutoscaleInput } from '@/components/spaceui/autoscale-input'
export default function SpaceUI() {
return <AutoscaleInput defaultValue="1234567.89" prefix="$" numberFormat="us" aria-label="Amount" />
}Files
| File | Role |
|---|---|
autoscale-input/index.tsx | Format helpers, useAutoscale, AutoscaleInput |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
numberFormat | us|eu|space|ch|in|none|string | us | Grouping / decimal style |
prefix | string | $ | Leading glyph, scales with the value |
suffix | string | - | Trailing glyph |
minSize | number | 18 | Minimum font size in px |
maxSize | number | 100 | Maximum font size in px |
containerClassName | string | — | Outer width wrapper |
wrapperClassName | string | — | Flex row around prefix / input / suffix |
All native <input> props are forwarded. Mobile text stays text-base.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page