# Number Input (/docs/number-input)
`NumberInput` is a numeric `` with spin buttons, built on Ark UI's NumberInput machine and the same shell as [`Input`](/docs/input). It clamps to a range, formats with `Intl.NumberFormat`, supports the mouse wheel, and ships the full keyboard model (`↑` / `↓` step, `PageUp` / `PageDown` jump, `Home` / `End` to min / max).
```tsx
import { NumberInput } from '@42-central/ui-react/number-input';
```
The value is a real `number` (or `null` for empty) — the machine speaks strings internally, but `value` / `defaultValue` take a `number | null` and `onChange` hands one back, `null` whenever the field has no valid number. Like the rest of the family it carries its own `label`, `description`, `error`, and `required` — no external wrapper needed — and passing `error` flips it to the invalid (red) state. Omit them and it still composes cleanly inside a [`Field`](/docs/field).
## Playground [#playground]
## Min, max & step [#min-max--step]
`min` / `max` clamp the range; `step` sets the spin amount. With `allowMouseWheel`, scrolling over a focused input nudges the value too.
## Formatting [#formatting]
`formatOptions` is forwarded straight to `Intl.NumberFormat`, so currency, percent, and unit display come for free — the parsed value stays a plain number.
## Sizes [#sizes]
Five heights — `xs` through `xl` — matching the rest of the family. The control font, padding, and the steppers scale to match.
## No controls [#no-controls]
`hideControls` drops the steppers for a plain numeric field — useful inside dense forms where the spin buttons would crowd the layout.
## Clearable [#clearable]
`clearable` adds a clear (×) button once there's a value — the numeric analogue of [`Select`](/docs/select)'s `clearable`. Clicking it resets the field to `null`. `placeholder` shows while the field is empty.
## Colors [#colors]
Like the rest of the form family, the input is palette-independent throughout — including the focus halo, which is a fixed `brand-500` per the 42 UI Kit spec. `color` is accepted for consistency with the rest of the kit but tints nothing here. See [Colors](/docs/colors) and [Focus](/docs/focus).
## Invalid & disabled [#invalid--disabled]
`invalid` swaps the border and ring to red regardless of `color` (and sets `aria-invalid`). `disabled` dims the shell and blocks input; `readOnly` keeps full contrast but rejects edits.
## With label, description & error [#with-label-description--error]
`label`, `description` (helper text), and `error` are built in via [`Field`](/docs/field) — no external wrapper needed. Passing `error` flips the shell to the invalid (red) state; `required` adds the semantic flag and a red asterisk on the label.
If you omit these props, the control still composes inside an outer [`Field`](/docs/field), inheriting the field's `invalid`, `disabled`, and `readOnly` from context — so an `error` on the field flips the input red automatically.
## Controlled [#controlled]
Drive the value from state. `onChange` hands you a `number`, or `null` while the field is empty or mid-edit.
```tsx
'use client';
import { useState } from 'react';
import { NumberInput } from '@42-central/ui-react/number-input';
export function Slots() {
const [value, setValue] = useState(1);
return ;
}
```
## Forms [#forms]
A `name` wires the underlying input into native `
```
## Translations [#translations]
`translations` reuses Ark's own NumberInput keys — the stepper names and `valueText`, which sets the input's `aria-valuetext` — plus the combobox family's `clearTriggerLabel`. Unset keys keep their English default.
```tsx
`${value} crédits`,
}}
/>
```
## API [#api]
## Accessibility [#accessibility]
* Full NumberInput keyboard model from Ark: `↑` / `↓` step, `PageUp` / `PageDown` jump by a larger step, `Home` / `End` snap to min / max.
* The input is `role="spinbutton"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` / `aria-valuetext` wired from the machine.
* `invalid` sets `aria-invalid`. Pass `label` / `description` / `error` for an accessible name and error text via the built-in [`Field`](/docs/field), or compose inside an outer `Field` instead.
* The steppers are real `