Number Field

A high-quality, styled React number field component built with @base-ui/react with stepping controls and scrub interactions.

The NumberField component provides accessible controls for adjusting numeric values via input typing, stepper buttons, arrow keys, or dragging the scrub area label.

Usage

import { NumberField } from "@/components/ui/number-field";

export function ExampleNumberField() {
  return (
    <NumberField.Root defaultValue={10} min={0} max={100}>
      <NumberField.ScrubArea>Quantity</NumberField.ScrubArea>
      <NumberField.Group>
        <NumberField.Decrement />
        <NumberField.Input />
        <NumberField.Increment />
      </NumberField.Group>
    </NumberField.Root>
  );
}

Preview

Amount

Anatomy

import { NumberField } from "@base-ui/react/number-field";

<NumberField.Root>
  <NumberField.ScrubArea>
    <NumberField.ScrubAreaCursor />
  </NumberField.ScrubArea>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>;

API Reference

NumberField.Root Props

Prop	Type	Default	Description
`value`	`number \| null`	`undefined`	Controlled numeric value.
`defaultValue`	`number`	`undefined`	Initial uncontrolled numeric value.
`min`	`number`	`undefined`	Minimum allowed value.
`max`	`number`	`undefined`	Maximum allowed value.
`step`	`number \| 'any'`	`1`	Increment and decrement step amount.
`smallStep`	`number`	`0.1`	Step value when holding Alt key.
`largeStep`	`number`	`10`	Step value when holding Shift key.
`onValueChange`	`(value: number \| null) => void`	`undefined`	Callback fired when value changes.