NumberInput
The
NumberInput component allows users to input numbers.Basic usage
You can use the
defaultValue prop to set the initial value, and access this from value on the
component state.Ranges and step size
You can set the
min, max, and step of the number input. Note that precision also needs to be
set for fractional steps.Formats
The
format prop can be set to "currency" or "percent".Component API
| Name | Description | Default |
|---|---|---|
| id | string The ID referenced by the global component state. | |
| defaultValue | number The input value on initial render. | |
| defaultDisabled | boolean The input's disabled state on initial render. | |
| validate | ((value: number) => number | undefined) | Array<(value: number) => number | undefined> A single function or an array of functions that validate the input value. | |
| required | boolean Adds red asterisk on the right side of label and sets required on input element | false |
| onChange | (value: number) => void Callback when input changes when using as a controlled component. Prefer
using the global component state. | |
| variant | "unstyled" | "default" Input appearance. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" Input size. | |
| disabled | boolean Disables the input. Prefer to use defaultDisabled and component state. | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" The input's border radius. | |
| width | SizingToken | "{number}px" Defines the width of the component. | auto |
| height | SizingToken | "{number}px" Defines the height of the component. | auto |
| grow | boolean If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack. | |
| value | number The value of the input when using as a controlled component. Prefer
using defaultValue and the global component state. | |
| step | number Number by which value will be incremented/decremented with controls and
up/down arrows. Specify `precision` if using a non-integer step. | |
| error | React.ReactNode Error text displayed below the input. | |
| label | React.ReactNode Label displayed above the input. | |
| description | React.ReactNode Description displayed below the input. | |
| icon | React.ReactNode Adds an icon to the left of the input. | |
| max | number Maximum possible value. Inputs are clamped to this maximum. | |
| min | number Minimum possible value. Inputs are clamped to this minimum. | |
| format | "decimal" | "currency" | "percent" The formatting style to use. | decimal |
| currency | "AUD" | "CAD" | "CLP" | "CNY" | "COP" | "GBP" | "HKD" | "INR" | "JPY" | "KRW" | "MYR" | "MXN" | "NZD" | "NOK" | "PHP" | "SGD" | "TWD" | "USD" | "ZAR" | "ARS" | "BRL" | "CHF" | "DKK" | "EUR" | "ILS" | "PLN" A three letter currency code to use, such as GBP, if `format` is set to
`currency`. | USD |
| precision | number Number of digits after the decimal point. | |
| removeTrailingZeros | boolean If `precision` is set, removes the trailing zeros. | false |
| hideControls | boolean Removes increment/decrement controls. |
State API
| Name | Description |
|---|---|
| value | number The number currently in the number input |
| setValue | (value: number) => void Sets the value of the number input |
| disabled | boolean Whether the number input is disabled |
| setDisabled | (disabled?: boolean) => void Sets the disabled value of the number input. If the `disabled` value is not provided, the number input will be disabled |