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.
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.
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.
Help text
Use the helpText property to indicate the proper way to fill in the numerical input.
Error
Use the error property to control and indicate whether it is a valid input or not.
Disabled
Disable the NumberInput by setting the disabled property to true.
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
- 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.
- 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.
- Do not use for big numbers. Steppers make more sense for small numbers that might be adjusted with a few clicks.
- Add the units, whenever applicable. Ex. kg, m², days, etc.
👉 For UX Writing guidelines, access https://uxwriting.vtex.com