‹ components

AmountInput

stablev1.0.0·open in canvas

Token amount entry: decimal string (never floats), symbol anchored, fiat echo + Max -- the undocumented fiat/token pattern, componentized.

Installnpx shadcn add @cids/amount-input
Live demo
SOL
≈ $230.32

Motion · tap to replay

honors reduced-motion

Border transition 150ms.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { AmountInput } from "@/design-system";

<AmountInput value={amt} onValueChange={setAmt} symbol="SOL" fiatValue="≈ $231.40" onMax={fillMax} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Token amount entry: decimal string (never floats), symbol anchored, fiat echo + Max -- the undocumented fiat/token pattern, componentized.

Anatomy

+ 1.25          Max  SOL +  <- data-md input - Max - symbol
  ≈ $231.40                <- fiat echo (data-sm, subtle)

Props

PropTypeDefaultNotes
value / onValueChangestring pair--Decimal STRING; sanitized to digits + one dot. Parse with mint decimals downstream.
symbolstring--Right-anchored token symbol.
fiatValuestring--Pre-formatted echo line.
onMax() => void--Renders the Max affordance.
invalidbooleanfalsearia-invalid + sell border.
disabledboolean--
aria-labelstring"Amount in <symbol>"
classNamestring--cn-merged.

Motion

Border transition 150ms.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.