NumberInput
Under the hood, It's a text input. This allows more flexibility, such as displaying formatting commas directly in the input.
The value we get is a number or, when it's not possible to infer a number, a string. For example, we get an empty string when the input is empty.
We may customize the input:
allowDecimal
: allow or forbid decimal numbers. Defaults to allow.allowNegative
: allow or forbid negative numbers. Defaults to allow.min
,max
: specify minimum and maximum values. The way it influences the input is determined byclampBehavior
clampBehavior
: determine how the value should clamp within the limits. We may forbid input outside the limits (strict
), clamp after input onblur
(d), or never clamp (none
)
As any text input we may have:
label
description
(secondary label)placeholder
const [value, setValue] = useState<string | number>("")
return <NumberInput value={value} onChange={setValue} />