Number Input

Related components

Number input field

NumberInput wraps Input set to a numeric value, along with two ActionIcon buttons for decrementing and incrementing the value.

<NumberInput name="age" />

When min or max values are set, the corresponding decrement or increment button will become disabled when the min/max values are reached. By default, min is set to 0.

A tooltip will display on hover of a disabled button, providing information on why the button is disabled. To override the default tooltip content, pass in a disabledTooltipContent object.

Note: A <ToolTipProvider /> must be rendered at the root of the app for this to work.

<NumberInput
  name="age"
  max={11}
  disabledTooltipContent={{ increment: 'Ages over 11 are not allowed' }}
/>

Appearance

NumberInput supports appearance and emphasis props for visual variants.

The appearance prop accepts "standard" (default) or "modern".

The emphasis prop accepts "bold" for a more prominent visual style with primary-colored stepper buttons.

<div className="flex flex-col gap-4">
  <NumberInput name="standard" appearance="standard" />
  <NumberInput name="modern" appearance="modern" />
  <NumberInput name="standardBold" appearance="standard" emphasis="bold" />
  <NumberInput name="modernBold" appearance="modern" emphasis="bold" />
</div>

Keyboard interactions

A negative tabindex has been added to the increment and decrement buttons to remove them from the default tabbing order. Instead, users can use the below keys to interact with the component.

• When you hit the ⬆️ or ➡️ key, the input value will be increased by step.
• When you hit the ⬅️ or ⬇️ key, the input value will be decreased by step.
• When you hit the Home button, the value will jump to the min value.
• When you hit the End button, the value will jump to the max value.

See MDN docs for more information on accessibility.

API Reference