# Number Input

Number field between minus and plus buttons, with a prefix or unit, limits, steps and decimals. Holding a button speeds up, and each tap nudges the figure up or down as it swaps.

> Composed · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add number-input
```

## Import

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

## Variants

- `limit` — Spending limit: `npx @lumioui/cli add number-input-limit`
- `recipe` — Recipe servings: `npx @lumioui/cli add number-input-recipe`
- `workout` — Workout sets: `npx @lumioui/cli add number-input-workout`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled value. |
| `defaultValue?` | `number` | Uncontrolled initial value. Default `min` if finite, else 0. |
| `onValueChange?` | `(value: number) => void` | Fires on every committed change (step, hold tick, typed commit). |
| `onStep?` | `(value: number, info: { direction: 1 | -1` | Fires on each button / a11y step with its direction, and `repeating`  while a held button is auto-stepping — e.g. to tighten a cascade. |
| `repeating` | `boolean }) => void` | — |
| `min?` | `number` | Lower bound. Default -Infinity. |
| `max?` | `number` | Upper bound. Default Infinity. |
| `step?` | `number` | Step for the buttons. Default 1. |
| `precision?` | `number` | Decimal places kept and displayed. Default: the step's decimals. |
| `prefix?` | `string` | Text before the number (`$`, `€`). |
| `unit?` | `string` | Unit after the number (`kg`, `min`, `servings`). |
| `thousands?` | `boolean` | Group thousands with commas (`1,250`). Default true. |
| `label?` | `string` | Label above the field. |
| `helper?` | `string` | Helper text under the field — replaced by the range hint when a typed  value was clamped. |
| `editable?` | `boolean` | Allow typing. Default true; false makes the value read-only text. |
| `variant?` | `"field" | "inline"` | "field" bordered input (default) or "inline" pill for list rows. |
| `size?` | `"sm" | "md" | "lg"` | sm 36 (rows) · md 48 · lg 56 (hero). Default md. |
| `disabled?` | `boolean` | — |
| `fullWidth?` | `boolean` | Stretch to the parent width. Default true for field, false for inline. |
| `className?` | `string` | Classes for the outer wrapper. |

## Icons rendered

- `minus` — /icons.html?i=minus
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/number-input