# antuikit / InputNumber

> InputNumber with `text` and `bare` variants and its stepper icons drawn from your icon pack.

Docs: https://antuikit.com/docs/components/inputnumber

## Install

npx antuikit@latest init
npx antuikit@latest add input-number

## Import

import { InputNumber } from "@/components/ui/input-number";

## Demos

- [Basic](https://ui.antuikit.com/embed/input-number/basic.md): Set `min` and `max` to keep the value in range, and step it by one with the arrow keys or the arrows shown on hover.
- [Sizes](https://ui.antuikit.com/embed/input-number/sizes.md): Set `size` to `large` or `small` to make the field taller or shorter than the default `medium`.
- [Variants](https://ui.antuikit.com/embed/input-number/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare` to match the field to its surroundings. `text` fills on hover and while focused, and `bare` draws nothing at all.
- [Spinner mode](https://ui.antuikit.com/embed/input-number/spinner.md): Set `mode` to `spinner` to replace the stacked arrows with a minus and a plus on either side of the value, which suits touch screens.
- [Spinner sizes](https://ui.antuikit.com/embed/input-number/spinner-sizes.md): Set `size` on a spinner to scale the field and its minus and plus buttons together.
- [Spinner variants](https://ui.antuikit.com/embed/input-number/spinner-variants.md): Every `variant` works in spinner mode, and each one keeps the dividers between the buttons and the value.
- [Spinner controls](https://ui.antuikit.com/embed/input-number/spinner-controls.md): Pass `controls` an object with `upIcon` and `downIcon` to change the button icons.
- [Status and disabled](https://ui.antuikit.com/embed/input-number/status-disabled.md): Set `status` to `warning` or `error` to color the field, or set `disabled` or `readOnly` to stop edits.
- [Out-of-range value](https://ui.antuikit.com/embed/input-number/min-max.md): `min` and `max` pull a typed value back into range on blur, but not a `value` you set, so derive `status` from it.
- [Precision](https://ui.antuikit.com/embed/input-number/precision.md): Set `precision` to fix the number of decimal places, and `step` to how far each step moves, like two places and steps of 0.1.
- [String mode](https://ui.antuikit.com/embed/input-number/string-mode.md): Set `stringMode` to keep the value as a string, for numbers with more digits than a JavaScript number can hold.
- [Formatter and parser](https://ui.antuikit.com/embed/input-number/formatter.md): Pair `formatter` with `parser` to show the number your way and read it back, like a $ 1,000 amount or a 50% share.
- [Prefix and suffix](https://ui.antuikit.com/embed/input-number/prefix-suffix.md): Set `prefix` or `suffix` to show a unit inside the field, like $ or kg, or join the field to a unit `Select` with `Space.Compact`.
- [Keyboard and wheel](https://ui.antuikit.com/embed/input-number/keyboard-wheel.md): Set `keyboard` to turn arrow-key stepping on or off, and `changeOnWheel` to let the scroll wheel step the value while the field has focus.
- [Cart line item](https://ui.antuikit.com/embed/input-number/quantity-row.md): A cart line with a spinner quantity that stops at one and updates the line total as it changes.
- [Guests and rooms](https://ui.antuikit.com/embed/input-number/guests-rooms.md): A booking panel with spinner counters for adults, children and rooms, each with its own minimum, and a summary of the choice.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/input-number`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `InputNumber` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.