Price Input
A text input that live-formats digits with thousands separators as you type — e.g. typing 125000 shows 125,000 on every keystroke, not just on blur. Reports back a plain number | null, so it's trivial to send to a server. It also normalizes Persian (۰-۹) and Arabic-Indic (٠-٩) numerals to plain digits as you type or paste, since Persian keyboards commonly type those instead of 0-9 — see Normalize Persian Digits.
Last updated January 1, 1980
Overview
Installation
Usage
import { PriceInput } from "@/components/ui/price-input"
export function Example() {
const [value, setValue] = React.useState<number | null>(125000)
return <PriceInput value={value} onValueChange={setValue} />
}Examples
Negative Amounts
Negative values are allowed by default. Pass min={0} to disallow them — the value is clamped to the given min/max range on blur.
With a Currency Suffix
Compose PriceInput with Input Group for a currency suffix like "تومان". Pass the group's control styles through className, and set data-slot="input-group-control" so it sits flush with the addon and its border/focus states bubble up to the group.
With an Abbreviation
A short abbreviation like "T" reads well in dense UI — tables, cards, compact forms — where the full word would crowd the layout.
With the Toman Icon
Use the Toman Icon instead of text for a more compact, symbol-first affordance.
RTL
The formatted amount itself stays dir="ltr" — digits always read left-to-right — while the label, suffix, and description flow naturally with the RTL layout around it. Try typing Persian digits (۰-۹) below; they're normalized automatically.