NumberField

A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.

import {NumberField} from './NumberField';

<NumberField
  label="Width"
  defaultValue={1024}
  minValue={0} />

Value

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).

import {NumberField} from './NumberField';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(25);
  return (
    <div>
      <NumberField
        label="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.

<NumberField
  label="Value"
  defaultValue={5}
  formatOptions={{style: "decimal"}} />

Value scale

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.

<NumberField
  label="Amount"
  minValue={0}
  maxValue={150}
  defaultValue={50}
  step={5} />

Numbering system

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.

import {I18nProvider} from 'react-aria-components';
import {NumberField} from './NumberField';

<I18nProvider locale="hi-IN-u-nu-deva">
  <NumberField label="Value" defaultValue={1024} />
</I18nProvider>

Forms

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.

import {NumberField} from './NumberField';
import {Button} from './Button';
import {Form} from './Form';;

<Form>
  <NumberField label="Width" name="width" isRequired />
  <Button type="submit">Submit</Button>
</Form>

API

<NumberField>
  <Label />
  <Group>
    <Input />
    <Button slot="increment" />
    <Button slot="decrement" />
  </Group>
  <Text slot="description" />
  <FieldError />
</NumberField>

NumberField

Default className: react-aria-NumberField