NumberInput

What is this?

NumberInputs represent a control for regular numerical input, where you expect the user to modify it by a few incremental steps.

Value

Use the properties value and onChange to handle value changes. Note that the onChange represents a function with the new value as a parameter.

Label

Step

The NumberInputs has two buttons, one to increment the value and the other to decrement it. By default, you can increase or decrease the value one by one, but you can also set a step, so the value will increase or decrease according to it.

Label

Min and Max

It is possible to define limits so that the value is never less than the minimum or greater than the maximum. If you reach one of these limits, the buttons for increasing and decreasing the value will be disabled. The min and max properties should have a value defined to activate this behavior.

Label

Help text

Use the helpText property to indicate the proper way to fill in the numerical input.

Label

Fill in with a number

Error

Use the error property to control and indicate whether it is a valid input or not.

Label

Invalid number input

Disabled

Disable the NumberInput by setting the disabled property to true.

Label

Usage

import { NumberInput } from '@vtex/admin-ui'

function Example() {
  const [value, setValue] = useState('')

  return (
    <NumberInput
      value={value}
      label="Label"
      helpText="Help text"
      onChange={(newValue) => setValue(newValue)}
    />
  )
}

Props

Name	Type	Description	Required	Default
label	string	Input label	🚫	-
value	NumberInputValue (string or number)	Displayed value	🚫	-
step	number	Increment and decrement multiplier value	🚫	1
min	number	Min value accepted	🚫	-Infinity
max	number	Max value accepted	🚫	Infinity
onChange	(value: NumberInputValue) => void	Change handler	🚫	-
disabled	boolean	Whether its disabled or not	🚫	false
error	booelan	Tone of voice	🚫	false
errorText	string	Error message	🚫	-
helpText	string	Help text message	🚫	-

Do’s

1. Always use a default value. If you do not know which one to use, pick 1. This way the user is not forced to type something and then click the buttons.
2. The lean mode is intended to be used on lists, that have a high density of content, and where being able to type the number is not important. It is especially useful in mobile contexts or cramped containers.
3. Do not use for big numbers. Steppers make more sense for small numbers that might be adjusted with a few clicks.
4. Add the units, whenever applicable. Ex. kg, m², days, etc.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• What is this?
• Value
• Step
• Min and Max
• Help text
• Error
• Disabled