Number Input

FREE

Number field with steppers, min/max, step, unit suffix, hold-to-repeat and keyboard stepping.

Playground

Change the props and watch the component and its code update live.

Props

Min

Max

Step

Unit

Size

Focus color

Disabled

Code

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

<NumberInput
  defaultValue={0}
  min={0}
  max={10}
/>

Terminal

npx @bloxa/cli add number-input
# or: npx shadcn@latest add @bloxa/number-input

Hold a stepper to repeat faster. Shift + arrow steps by 10.

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
value / defaultValue	number \| null	—	Numeric value.
onValueChange	(value: number \| null) => void	—	Called when the value changes.
min / max / step	number	-∞ / ∞ / 1	Bounds and step (can be decimal).
unit	string	—	Unit shown after the number.
size	"sm" \| "md" \| "lg"	"md"	Height and text size.