How to use

Use AutoscaleInput when you need a big, responsive amount field. Apps like Uniswap and Wise scale the input font down as the value grows so swap amounts, transfer values, and balances stay readable without breaking the layout. This is a common pattern in crypto and finance apps where the input is the main focus.

Basic usage

import { AutoscaleInput } from "@/components/v1/skiper105";

const PriceInput = () => (
  <AutoscaleInput
    numberFormat="us"
    prefix="$"
    placeholder="0.00"
    aria-label="Price"
  />
);

Controlled

import { useState } from "react";
import { AutoscaleInput } from "@/components/v1/skiper105";

const ControlledInput = () => {
  const [amount, setAmount] = useState("1,234.56");

  return (
    <AutoscaleInput
      value={amount}
      onChange={(e) => setAmount(e.target.value)}
      numberFormat="us"
      prefix="$"
    />
  );
};

Uncontrolled

<AutoscaleInput
  defaultValue="50000"
  numberFormat="in"
  prefix="₹"
  name="salary"
/>

Locale formats

<AutoscaleInput numberFormat="eu" prefix="€" suffix="/mo" />
<AutoscaleInput numberFormat="ch" prefix="CHF " />
<AutoscaleInput numberFormat="space" prefix="" />
<AutoscaleInput numberFormat="string" placeholder="Type anything…" />

Standard input props

<AutoscaleInput
  id="budget"
  name="budget"
  disabled={isLoading}
  readOnly={isLocked}
  autoFocus
  onBlur={(e) => console.log(e.target.value)}
  onKeyDown={(e) => e.key === "Enter" && e.currentTarget.blur()}
  className="text-primary"
  wrapperClassName="justify-start"
  containerClassName="max-w-lg"
/>

DialKit setup

AutoscaleInput uses DialKit for live parameter tweaking. See the DialKit docs for installation and DialRoot setup.

Notes

• Number formats: 1,234,567.89 (US), 1.234.567,89 (EU), 1 234 567,89 (SPACE), 1'234'567.89 (CH), 12,34,567.89 (IN), 1234567.89 (NONE), or Any text (STRING) for unformatted input
• onChange always receives the formatted display value (e.g. 1,234.56), not raw digits
• Prefix and suffix fade to 20% opacity when the input is empty
• Font size scales down automatically as the value grows; ResizeObserver keeps sizing in sync when the container width changes
• Use the Autoscale Input DialKit panel to tweak format, placeholder, font bounds, and input layout (max width, padding)

Attribution

• Amount input pattern inspired by Uniswap
• Responsive large-type input inspired by Wise