Number field

Start by passing a required name property and control aria-labels to NumberField. If you need to handle its change events, add an onChange property to it.

<NumberField
  name="amount"
  increaseAriaLabel="Increase value"
  decreaseAriaLabel="Decrease value"
  defaultValue={3}
  onChange={console.log}
/>

Same as when using native inputs in React, NumberField can be used as a controlled or uncontrolled component. By default, NumberField is uncontrolled and allows you to define its default value using the defaultValue property. In this case, all change events are handled automatically. This approach is helpful when pre-filling a form from a data source, but you don't need to control the further behavior of the input.

<NumberField
  name="amount"
  increaseAriaLabel="Increase value"
  decreaseAriaLabel="Decrease value"
  defaultValue={3}
  onChange={({ value }) => {
    /* Update your state here */
    console.log({ value });
  }}
/>

If you need to control the state of the field manually, you can use the value property. This provides complete control of the component value and disables automatic value handling. You must update the state using the onChange handler and can add custom logic before that happens.

<NumberField
  name="amount"
  increaseAriaLabel="Increase value"
  decreaseAriaLabel="Decrease value"
  value={3}
  onChange={({ value }) => {
    /* Update your state here */
    console.log({ value });
  }}
/>

NumberField implementation is based on the TextField and therefore it supports most of the TextField properties, like variant and size.

<NumberField
  icon={<HashIcon />}
  name="amount"
  variant="faded"
  defaultValue={5}
  increaseAriaLabel="Increase value"
  decreaseAriaLabel="Decrease value"
/>

To let the user know what data you expect them to type in, add labels or status messages to your fields with the help of the FormControl utility. In case you're using xlarge TextField size, you can also combine it with the large FormControl size for better visual alignment.

<FormControl>
  <FormControl.Label>Amount</FormControl.Label>
  <NumberField
    name="name"
    defaultValue={5}
    increaseAriaLabel="Increase value"
    decreaseAriaLabel="Decrease value"
  />
</FormControl>

NumberField supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<NumberField size={{ s: 'medium', l: 'large' }}>

• ArrowUp - increase the value
• ArrowDown - decrease the value

• When using NumberField without a label - make sure to provide a text description. You can either provide the label by using the FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.
• Value controls increase their size for touch devices to provide a larger tappable area

<NumberField inputAttributes={{ "aria-label": "Email" }} />