Number Field
Numeric stepper with hold-to-repeat, keyboard steps and locale formatting.
A number field edits quantities: seats, prices, sizes. Cuelark's stepper repeats and accelerates while you hold −/+, supports arrow keys, Page Up/Down and Home/End, formats with Intl (currency, percent, units), and slides the value in from the direction it moved.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/number-field.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/number-field.
Builds on: motion
Usage
import { NumberField } from "@/components/ui/number-field";
<NumberField defaultValue={1} min={0} max={10} />Motion
The value slides in from above or below depending on the direction it changed.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
NumberField
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | Controlled or initial value. |
| onValueChange | (value: number) => void | — | Called with the clamped value. |
| min · max · step | number | -∞ · ∞ · 1 | Bounds and increment. |
| formatOptions | Intl.NumberFormatOptions | — | Display formatting. |
| size | "sm" | "md" | "lg" | "md" | Height. |
Accessibility
- role=spinbutton with aria-valuenow, -min and -max.
- Steppers are skipped by Tab; the keyboard does everything from the input.
FAQ
Also searched as: react number input · number stepper · quantity input · increment decrement input · currency input react