Ark UI

Import

import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrementTrigger,
  NumberInputInput,
  NumberInputIncrementTrigger,
  NumberInputLabel,
  NumberInputScrubber,
} from '@ark-ui/react'

Usage

The NumberInput component consists of the NumberInputLabel, NumberInputControl, NumberInputInput, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputScrubber, components.

<NumberInput>
  <NumberInputScrubber />
  <NumberInputLabel>Label</NumberInputLabel>
  <NumberInputInput />
  <NumberInputControl>
    <NumberInputDecrementTrigger>-</NumberInputDecrementTrigger>
    <NumberInputIncrementTrigger>+</NumberInputIncrementTrigger>
  </NumberInputControl>
</NumberInput>

Setting a minimum and maximum value

Pass the min prop or max prop to set an upper and lower limit for the input. By default, the input will restrict the value to stay within the specified range.

<NumberInput min={0} max={10}>
  {/*...*/}
</NumberInput>

Adjusting the precision of the value

In some cases, you might need the value to be rounded to specific decimal points. Pass the precision prop and set it to the number of decimal points.

<NumberInput precision={3}>{/*...*/}</NumberInput>

Scrubbing the input value

The NumberInput supports the scrubber interaction pattern. To use this pattern, render the NumberInputScrubber component. It uses the Pointer lock API and tracks the pointer movement. It also renders a virtual cursor which mimics the real cursor’s pointer.

<NumberInput>
  <NumberInputScrubber />
  <NumberInputLabel>Label</NumberInputLabel>
  <NumberInputInput />
  <NumberInputControl>
    <NumberInputDecrementTrigger>-</NumberInputDecrementTrigger>
    <NumberInputIncrementTrigger>+</NumberInputIncrementTrigger>
  </NumberInputControl>
</NumberInput>

Using the mousewheel to change value

The NumberInput exposes a way to increment/decrement the value using the mouse wheel event. To activate this, set the allowMouseWheel prop to true.

<NumberInput allowMouseWheel>{/*...*/}</NumberInput>

Clamp value when user blurs the input

In most cases, users can type custom values in the input field. If the typed value is greater than the max, the value is reset to max when the user blur out of the input.

To disable this behavior, pass clampValueOnBlur and set to false.

<NumberInput clampValueOnBlur={false}>{/*...*/}</NumberInput>

Usage within forms

To use the number input within forms, set the name prop.

<NumberInput name="quantity">{/*...*/}</NumberInput>

Format and parse value

To apply custom formatting to the input’s value, use the exposed format and parse functions. For example, to format the input’s value to currency, here’s how to achieve it:

<NumberInput
  format={(value) => `$${value}`}
  parse={(value) => value.replace(/\$/g, '')}
>
  {/*...*/}
</NumberInput>

Number Input