Dinachi

Number Field

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

View Source

#Installation

npx @dinachi/cli@latest add number-field

#Usage

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

#Examples

#API Reference

PropTypeDefaultDescription
valuenumber—The controlled numeric value.
defaultValuenumber—Initial numeric value when uncontrolled.
onValueChange(value: number | null) => void—Callback fired when the numeric value changes.
minnumber—Minimum allowed value.
maxnumber—Maximum allowed value.
stepnumber1Increment/decrement step size.