InputNumber

Numeric input that only accepts numbers. Optionally formats as currency with thousand separators while typing. onChange returns both the parsed number and the display text.

Playground

currency

controls

prefix

suffix

placeholder

size

disabled

<InputNumber/>

onChange: value & text

onChange fires on every keystroke and returns (value: number | null, text: string).

value: null  text: “”

Currency format

currency adds thousand separators as you type. Use thousandSeparator and decimalSeparator to localise.

Spinner controls

controls shows ▲ ▼ buttons. Arrow keys also increment/decrement.

Prefix & Suffix

String symbols shown inside the wrapper. Purely visual, not part of the value.

Min / Max / Precision

min and max are enforced on blur and spinner. precision limits decimal places.

Percentage

Allowed: 0 – 100

Rating

Sizes

Three sizes that match the rest of the component library.

Label, Error & Hint

Same label/error/hint pattern as the Input component.

Amount

Enter the transaction amount

Amount

Amount must be greater than 0

Disabled

Disabled state prevents all interaction including spinner buttons and keyboard shortcuts.

API

Property	Type	Default	Description
`value`	`number`		Controlled numeric value
`defaultValue`	`number`		Uncontrolled initial numeric value
`onChange`	`(value: number \| null, text: string) => void`		Fires on every change. Receives the parsed number and the formatted display text
`min`	`number`		Minimum allowed value, enforced on blur and spinner
`max`	`number`		Maximum allowed value, enforced on blur and spinner
`step`	`number`	1	Spinner increment/decrement step
`precision`	`number`		Max decimal places. Omit for unlimited. Pass 0 for integers only
`currency`	`boolean`	false	Format with thousand separators while typing
`thousandSeparator`	`string`	","	Thousand separator character
`decimalSeparator`	`string`	"."	Decimal separator character
`prefix`	`string`		Symbol/text shown before the value (e.g. "₫" or "$")
`suffix`	`string`		Symbol/text shown after the value (e.g. "VND")
`controls`	`boolean`	false	Show ▲ ▼ spinner buttons
`label`	`string`		Label text above the input
`required`	`boolean`	false	Adds a red asterisk to the label
`error`	`string`		Error message shown below the input
`hint`	`string`		Helper text shown below the input
`size`	`"sm" \| "md" \| "lg"`	"md"	Size preset
`disabled`	`boolean`	false	Disable all interaction
`placeholder`	`string`		Placeholder text
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`		Border-radius override