# Number Input

> Source: https://design.nanatec.co.ke/components/number-input/
> A numeric field with its own increment and decrement controls, bounded by min, max and step.

A numeric field with its own stepper buttons. The value is held as text while
you type, so a half-entered number survives; it is clamped and rounded once the
field is left.

:::note
This one ships as a web component only. There is no React or Svelte
implementation yet, so the CLI has nothing to copy for those targets.
:::

## Preview

```html
<nana-number-input label="Quantity" value="1" min="0" max="10"></nana-number-input>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

```js
import "@nana-tec/ui-components/number-input";
```

## Bounds

`min` and `max` close the range. The button that would do nothing is disabled
rather than silently ignored, so the limit is visible before it is hit.

```html
<nana-number-input label="Guests" value="2" min="1" max="4"></nana-number-input>
```

## Step and precision

`step` sets how far one move travels. Decimal steps keep their precision rather
than drifting — stepping `0.1` by `0.2` lands on `0.3`, not `0.30000000000000004`.

```html
<nana-number-input label="Rate" value="0.1" step="0.2"></nana-number-input>
```

Set `precision` to fix the number of decimal places kept when stepping and on
blur.

## Tidying on blur

Typing is left alone until focus leaves. Enter `42` into a field capped at `10`
and it stays `42` while you are in it, then settles to `10`. Text that is not a
number is cleared the same way.

```html
<nana-number-input label="Capped at 10" max="10" helper="Type 42, then click away"></nana-number-input>
```

## Keyboard

| Key | Result |
|---|---|
| <kbd>↑</kbd> | One step up |
| <kbd>↓</kbd> | One step down |

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-input` | `CustomEvent` | While typing; `detail.value` is the number, or `undefined`. |
| `nana-change` | `CustomEvent` | Once the value settles; `detail.value` is the number, or `undefined`. |

## Accessibility

The field is a `spinbutton` carrying `aria-valuenow`, `aria-valuemin` and
`aria-valuemax`. The stepper buttons are labelled and kept out of the tab order,
so a keyboard reaches the value directly and moves it with the arrow keys.

## Related components

- [Input](/components/input) — a single free-text field
- [Range](/components/range) — the same bounded value as a slider