Use the value or defaultValue prop to set the number value. The onChange event is called when the user finishes editing the value (e.g. on blur, incrementing, or decrementing).
Current value: 25
import {NumberField} from'./NumberField';
import {useState} from'react';
function Example() {
let [value, setValue] = useState(25);
return (
<div>
<NumberFieldlabel="Cookies to buy"value={value}
onChange={setValue}
/>
<p>Current value: {value}</p>
</div>
);
}
Format options
Use the formatOptions prop to control how the value is formatted (according to the user's locale). This is compatible with the Intl.NumberFormat API.
formatOptions
Formatting options for the value displayed in the number field.
This also affects what characters are allowed to be typed by the user.
Use the minValue, maxValue, and step props to set the allowed values. Steps are calculated starting from the minimum. For example, if minValue={2}, and step={3}, the valid step values would be 2, 5, 8, 11, etc.
By default, NumberField displays the value using the numbering system for the user's locale. Use <I18nProvider> to override the numbering system by setting the Unicode numbering system locale extension. The Latin, Arabic, Devanagari, Bengali, and Han positional decimal numbering systems are currently supported.
Use the name prop to submit the raw number value (not a formatted string) to the server. Set the isRequired prop to validate that the user enters a value, or implement custom client or server-side validation. See the Forms guide to learn more.