Number Input

Native number field with −/+ buttons: arrow keys, min/max/step validation and form submit from the platform; clamps on blur, rounds to the step's precision.

npx @kznlabs/labsui add number-input

Quantity

$29.00 · max 10 per order

Cooldown (seconds)

"use client";import { useState } from "react";import { Field } from "@/components/ui/field";import { NumberInput } from "@/components/ui/number-input";export function CartQuantity() {  const [qty, setQty] = useState(1);  return (    <Field label="Quantity">      <NumberInput        value={qty}        onValueChange={setQty}        min={1}        max={10}        name="qty"      />    </Field>  );}

<NumberInput>

Native number field (ArrowUp/Down, form submit, min/max validation) with −/+ buttons, e.g. a cart quantity. Buttons are pointer helpers (tabIndex -1); keyboard users use the arrows.

defaultValuedefault 0
number
Number at first render (uncontrolled).
max
number
Highest value.
min
number
Lowest value.
onValueChange
(value: number) => void
Called with the new number.
stepdefault 1
number
Amount the buttons and Up/Down change it by.
value
number
Controlled number; pair with onValueChange.

Prop	Type	Default
`defaultValue` Number at first render (uncontrolled).	`number`	`0`
`max` Highest value.	`number`	—
`min` Lowest value.	`number`	—
`onValueChange` Called with the new number.	`(value: number) => void`	—
`step` Amount the buttons and Up/Down change it by.	`number`	`1`
`value` Controlled number; pair with `onValueChange`.	`number`	—

Also accepts every <input> prop.

* required. Every component also takes className.