金額入力CurrencyInputExperimental

Money editor: a currency-symbol-prefixed, thousands-grouped, right-aligned amount input that formats while typing and emits a numeric value. JPY-first; for invoices, payroll, expenses, and any fintech amount field.

プレビュー

数値: 1200000 ／ 表示: ￥1,200,000

Props

表は横にスクロールできます
プロパティ型初期値説明
labelReactNode-Visible label rendered above the control and associated via htmlFor (like Input / Select / Textarea).
descriptionReactNode-Helper text under the control, wired via aria-describedby.
valuenumber-Numeric amount (controlled).
onValueChange(value: number | undefined) => void-Fires with the number, or undefined when cleared.
currencystring"JPY"ISO 4217 code for the symbol + grouping.
localestring"ja-JP"BCP-47 locale for the symbol + grouping.
showSymbolbooleantrueShow the currency symbol as a leading adornment.
min / maxnumber-Clamp the entered value.
...InputHTMLAttributes—-id, name, placeholder, disabled, aria-*, className, etc.

Usage

import { CurrencyInput, formatCurrency } from "@gunjo/ui"

export function Example() {
  const [amount, setAmount] = React.useState<number | undefined>(1200000)
  return (
    <CurrencyInput value={amount} onValueChange={setAmount} min={0} />
    // value is a number; display elsewhere with formatCurrency(amount)
  )
}