NumberInputV2

Use NumberInputV2 to let users enter integers and floating-point numbers.

OverviewPropertiesUsageMigration

NumberInput is deprecated and will be removed in the next major release, planned for autumn 2026. Please migrate to NumberInputV2 before then. After the deprecation period, NumberInputV2 will become the new NumberInput.

What changed

NumberInputV2 replaces NumberInput with built-in min/max/step validation, locale-aware formatting, and compound-component slots for prefix/suffix content.

Follow these steps to migrate to NumberInputV2:

1. Review changed props

Prop	NumberInput	NumberInputV2
min	number | string	number
max	number | string	number
step	number — controls increment only	number — also defines the valid value interval
stepMultiplier	—	number (new)
variant	—	'default' | 'minimal' (new)
children	—	Prefix, Suffix, Button slots (new)
autoComplete	✓	removed
minLength	✓	removed
maxLength	✓	removed
pattern	✓	removed

If you passed min or max as strings (e.g. min="0"), change them to numbers:

- <NumberInput min="0" max="100" />
+ <NumberInputV2 min={0} max={100} />

2. Handle onChange vs onBlur behavior change

In NumberInput, onChange fires only on blur — that is, when the user commits a value by leaving the field. By contrast, in NumberInputV2, onChange fires on every keystroke, as soon as a valid number is entered. For example, if min={0} and max={100}, valid numbers include 0, 50, 99.99, or any number within that range that respects the step interval.

If your application logic depends on the old commit-on-blur behavior (e.g., triggering a network request or expensive computation), move that logic into onBlur instead:

- <NumberInput
-   value={value}
-   onChange={(newValue) => {
-     setValue(newValue);
-     triggerExpensiveOperation(newValue); // was safe because onChange only fired on blur
-   }}
- />
+ <NumberInputV2
+   value={value}
+   onChange={setValue}
+   onBlur={() => triggerExpensiveOperation(value)} // move commit logic here
+ />

If you only need the value for controlled state, no change is required — onChange={setValue} works the same way.

3. Replace external validation with built-in FormFieldMessages

NumberInputV2 validates min, max, and step automatically and surfaces error messages through FormField and FormFieldMessages. You no longer need to wire up external validation libraries just for range errors.

- <FormField>
-   <Label>Threshold</Label>
-   <NumberInput
-     value={value}
-     onChange={setValue}
-     min={0}
-     max={100}
-     controlState={{ type: 'error', text: errorMessage }}
-   />
- </FormField>
+ <FormField>
+   <Label>Threshold</Label>
+   <NumberInputV2 value={value} onChange={setValue} min={0} max={100} />
+   <FormFieldMessages />
+ </FormField>

4. Migrate prefix and suffix content

NumberInputV2 exposes NumberInputV2.Prefix, NumberInputV2.Suffix, and NumberInputV2.Button as compound components instead of as separate layout wrappers.

- <NumberInput value={value} onChange={setValue} />
+ <NumberInputV2 value={value} onChange={setValue}>
+   <NumberInputV2.Suffix>kg</NumberInputV2.Suffix>
+ </NumberInputV2>