Number Field

A number input with minus and plus buttons, keyboard and wheel stepping, bounds, and formatting for currency, percent and units.

Base UI React Aria Radix UI

Total $254.15

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/number-field.json

Usage

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

<NumberField defaultValue={1} min={1} max={99} aria-label="Quantity" />
 
<NumberField
  value={price}
  onValueChange={setPrice}
  min={0}
  step={0.5}
  formatOptions={{ style: "currency", currency: "CAD" }}
/>
 
<NumberField
  defaultValue={0.15}
  min={0}
  max={1}
  step={0.01}
  formatOptions={{ style: "percent" }}
/>

Keyboard

Arrow Up and Arrow Down. Step by step. Hold Shift to step by largeStep.
Page Up and Page Down. Step by largeStep, ten steps by default.
Home and End. Jump to min and max when they are set.
Enter. Commits what was typed. In a form, it still submits.
Wheel. Steps only while the field has focus, so the page keeps scrolling.

Props

value, defaultValue, onValueChange. The number, or null when the field is empty. Use it controlled or not.
min, max, step. Bounds and step size. Typed values are clamped to the bounds and rounded to the decimals the step or the format shows when the field loses focus. The buttons turn off at the bounds.
largeStep. The step for Page Up, Page Down and Shift with an arrow.
formatOptions, locale. Passed to Intl.NumberFormat for the value shown when the field is not being edited. With style: "percent" the value is a fraction, so 0.15 shows as 15% and is typed as 15.
prefix, suffix. Text or an icon inside the field, beside the number.
disabled, readOnly, aria-invalid. Behave like an input. An invalid field gets the destructive ring.

Navigation Menu Pagination

On This Page

Installation Usage Keyboard Props