Build · New

Number Input

A number field with minus / plus steppers and an optional currency prefix. It writes the value in the page's numerals (123 or ١٢٣) and accepts either when typed.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/number-input

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { NumberInput } from "@/components/ui/number-input";

<NumberInput label="Amount" prefix="$" defaultValue={100} min={0} step={50} />

Examples

States and formats

format takes Intl.NumberFormat options (fractions, grouping). Read-only hides the steppers.

API reference

NumberInput

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label.
`value / defaultValue`	`number`		The numeric value (not the formatted text).
`onValueChange`	`(value: number \| null) => void`		When the value changes.
`min / max / step`	`number`	`step 1`	Bounds and step. Shift steps by 10.
`format`	`Intl.NumberFormatOptions`		How the value is formatted.
`prefix`	`ReactNode`		_Leading content: a currency or unit.
`stepper`	`boolean`	`true`	Show the minus / plus steppers.
`decrementLabel / incrementLabel`	`string`		Stepper names for screen readers. Default: in the page language.
`required / helperText / error / disabled / readOnly`	`…`		As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowUpArrowDown`	Steps the value up or down.
`ShiftArrowUp`	Steps by 10.
`HomeEnd`	The min and max, when set.

ARIA

The input is tied to its label and helper text like Input Field.
The steppers are named (“Increase”, “Decrease”) in the page language.

Arabic and RTL notes

Mirrors

The currency sits at the start (the right) and the steppers at the end, plus on the far left.

Does not mirror

The number reads left to right (dir="ltr") so a minus sign stays in front, aligned to the start of the field.

Numerals: Follows numerals from KanzProvider: ١٬٢٣٤ or 1,234. Typed Arabic-Indic and Persian digits are read as numbers.
Arabic typography: label-16, like every field.

All components ›