Number Field

A numeric input field with increment and decrement controls. Built on Base UI NumberField primitives.

Usage

import {
  NumberFieldRoot,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldInput,
  NumberFieldIncrement,
} from "@/components/ui/static/number-field"

<NumberFieldRoot value={value} onValueChange={setValue}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

Shopping Cart

Product Name

$29.99

Price Input

Set Price

API Reference

valuenumber | null

The controlled value of the field.

defaultValuenumber

The default value when uncontrolled.

onValueChange(value: number | null) => void

Callback when the value changes.

minnumber

Minimum allowed value.

maxnumber

Maximum allowed value.

stepnumber

=1

Step increment.

disabledboolean

=false

Whether the field is disabled.

formatIntl.NumberFormatOptions

Options to format the input value.