Number Input

A strict numeric input component with formatting, prefixes, and steppers.

A specialized input primitive for strictly handling numeric data, featuring automatic formatting on blur, up/down steppers, and support for prefixes/suffixes.

Demo

Quantity (Number Only)

Currency (USD)

Weight (kg)

Discount (%)

Usage

import { NumberInput } from "@/components/ui/number-input"
 
export function MyComponent() {
  return (
    <NumberInput 
      prefix="$"
      defaultValue={1250}
      formatOptions={{ minimumFractionDigits: 2 }} 
    />
  );
}

API Reference

Prop	Type	Description
`value`	`number`	The controlled value of the input.
`defaultValue`	`number`	The uncontrolled default value.
`onChange`	`(value: number \| undefined) => void`	Callback when the valid parsed number changes.
`min`	`number`	Minimum allowed value.
`max`	`number`	Maximum allowed value.
`step`	`number`	Step increment for the arrows. Defaults to `1`.
`prefix`	`React.ReactNode`	Element to render on the left side.
`suffix`	`React.ReactNode`	Element to render on the right side.
`formatOptions`	`Intl.NumberFormatOptions`	Formatting options for `Intl.NumberFormat`.

Label Pagination

On This Page

Demo Usage API Reference