# Number Input

- Page: <https://kznlabs.github.io/labsUI/components/number-input>

## Number Input (`number-input`, component)

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.

- Install: `npx @kznlabs/labsui add number-input`
- Docs: <https://kznlabs.github.io/labsUI/components/number-input>
- Brings: field, input, input-group, label, use-controllable-state, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<NumberInput>` (+ <input> props): 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.
  - `defaultValue?: number` = `0`: Number at first render (uncontrolled).
  - `max?: number`: Highest value.
  - `min?: number`: Lowest value.
  - `onValueChange?: (value: number) => void`: Called with the new number.
  - `step?: number` = `1`: Amount the buttons and Up/Down change it by.
  - `value?: number`: Controlled number; pair with `onValueChange`.

### Usage

```tsx
<NumberInput value={qty} onValueChange={setQty} min={1} max={10} name="qty" />
```

### Example: cart-quantity.tsx

```tsx
"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>
  );
}
```