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.
tsx
Copied
1
<NumberInput id="numberInput" label="Input your age" />
2
<Text>Your age is {numberInputState.value}</Text>

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.
tsx
Copied
1
<NumberInput
2
  label="Pizzas"
3
  description="Each increment adds one slice (1/8)"
4
  min={0}
5
  max={2}
6
  step={0.125}
7
  precision={3}
8
/>

Formats
The format prop can be set to "currency" or "percent".
tsx
Copied
1
<NumberInput label="Price" id="euros" format="currency" precision={2} currency="EUR" />
2
<NumberInput
3
  label="Discount"
4
  id="percent"
5
  format="percent"
6
  precision={4}
7
  step={0.005}
8
  min={0}
9
  max={1}
10
/>
11
<Text>Final price: € {(euros.value * (1 - percent.value)).toFixed(2)}</Text>

Component API
currency
optional
Default
USD
"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.

defaultDisabled
optional
boolean

The input's disabled state on initial render.

defaultValue
optional
number

The input value on initial render.

description
optional
React.ReactNode

Description displayed below the input.

disabled
optional
boolean

Disables the input. Prefer to use defaultDisabled and component state.

error
optional
React.ReactNode

Error text displayed below the input.

format
optional
Default
decimal
"decimal" | "currency" | "percent"

The formatting style to use.

grow
optional
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.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
hideControls
optional
boolean

Removes increment/decrement controls.

icon
optional
React.ReactNode

Adds an icon to the left of the input.

id
optional
string

The ID referenced by the global component state.

label
optional
React.ReactNode

Label displayed above the input.

max
optional
number

Maximum possible value. Inputs are clamped to this maximum.

min
optional
number

Minimum possible value. Inputs are clamped to this minimum.

onChange
optional
(value: number) => void

Callback when input changes when using as a controlled component. Prefer using the global component state.

precision
optional
number

Number of digits after the decimal point.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

The input's border radius.

removeTrailingZeros
optional
Default
false
boolean

If precision is set, removes the trailing zeros.

required
optional
Default
false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Input size.

step
optional
number

Number by which value will be incremented/decremented with controls and up/down arrows. Specify precision if using a non-integer step.

validate
optional
((value: number) => number | undefined) | Array<(value: number) => number | undefined>

A single function or an array of functions that validate the input value.

value
optional
number

The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.

variant
optional
"unstyled" | "default"

Input appearance.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
disabled
optional
boolean

Whether the number input is disabled

setDisabled
optional
(disabled?: boolean) => void

Sets the disabled value of the number input. If the disabled value is not provided, the number input will be disabled

setValue
optional
(value: number) => void

Sets the value of the number input

value
optional
number

The number currently in the number input

PrivacyTermsSupport