Auto Scale Input
オートスケールインプット
An amount field that shrinks its own type as the number grows, so a long figure never runs past the edge or gets clipped. The text is measured once at full size and the font scaled by the ratio — stepping it down a point at a time and re-measuring would reflow the field on every keypress. A floor keeps it readable. Built with Tailwind CSS.
$
Installation
Copy and paste the following code into a new component file:1
"use client"
import { useCallback, useEffect, useRef, useState } from "react"
type AutoScaleInputProps = {
prefix?: string,
placeholder?: string,
defaultValue?: string,
maxSize?: number,
minSize?: number,
How to use it2
"use client"
import { AutoScaleInput } from "@/components/ui/auto-scale-input"
export default function Page() {
return <AutoScaleInput prefix="$" maxSize={56} minSize={18} />
}
Props
AutoScaleInput
| Name | Default | Description |
|---|---|---|
| prefix | "$" | string Symbol shown before the figure, scaled with it |
| placeholder | "0" | string Shown while empty, and measured so the empty state fits too |
| defaultValue | "" | string Initial uncontrolled value |
| maxSize | 56 | number Font size in pixels while the value still fits |
| minSize | 18 | number Floor below which the type will not shrink |
| width | 300 | number Width of the field in pixels |
| dark | false | boolean Render the dark palette |