Number Field

A numeric input with increment, decrement, and optional scrubbing controls.

#Installation

npx @dinachi/cli@latest add number-field

#Usage

tsx

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
} from "@/components/ui/number-field"

#Examples

Default Number Field

A basic number input with increment/decrement buttons

Number Field with Min/Max

Number field with minimum and maximum constraints

Quantity (1-10)

Number Field with Step

Number field with decimal step increments

Price ($)

#API Reference

Prop	Type	Default	Description
value	number	—	The controlled numeric value.
defaultValue	number	—	Initial numeric value when uncontrolled.
onValueChange	(value: number \| null) => void	—	Callback fired when the numeric value changes.
min	number	—	Minimum allowed value.
max	number	—	Maximum allowed value.
step	number	1	Increment/decrement step size.