InputNumber is installed into your project as a file you own. It takes every prop of Ant Design's InputNumber, and its generic types value, onChange, min, max and step together.
The kit adds one thing: the button icons come from your icon pack. They follow mode, icons you pass through controls win per key, and controls={false} still removes the buttons.
Install
npx antuikit@latest init
npx antuikit@latest add input-number
The first command installs AntuikitProvider and the theme tokens, and the second adds InputNumber.
Import
From @/components/ui/input-number, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { InputNumber } from "@/components/ui/input-number"
The axes
The enumerated props, and the values each one takes. These are the axes the Design tab's Figma properties correspond to.
mode takes input (the default) and spinner. input stacks two chevrons in the actions column beside the value, and spinner puts a minus and a plus on either side of it, with no actions column.
size takes small, medium, middle and large. middle is the old spelling of medium and is deprecated. Unset, it follows Space.Compact first and then ConfigProvider, so a field in a compact group matches its neighbors.
variant takes outlined (the default), filled, borderless and underlined. It replaces the deprecated bordered, which is borderless under an older name.
status takes error, warning, success, validating and the empty string. Inside a Form.Item the form sets it, so leave it alone.
Flags
Three of these default to true: controls, keyboard and changeOnBlur.
disabled (default false): falls back to ConfigProvider's componentDisabled when it is not set, and removes the buttons.
readOnly (default false): the value stays selectable and copyable but cannot be edited, and the buttons go with it.
stringMode (default false): keeps the value a string end to end, for numbers a JavaScript number cannot hold. Pass the generic with it, <InputNumber<string>>, so the value is typed as a string.
controls (default true): also takes an object with upIcon and downIcon. The kit fills both from your icon pack.
keyboard (default true): arrow-key stepping, with Shift for ten times step. Turning it off leaves Enter working.
changeOnWheel (default false): step on the wheel while the field has focus. Scrolling over the focused field then steps the value instead of scrolling the page, so leave it off inside scrolling panels.
changeOnBlur (default true): commit on blur. It is also what pulls an out-of-range entry back into min and max. With false the reader must press Enter or use a button.
Slots
The props that take a node. Use a slot for your own markup before reaching for a descendant selector.
prefix and suffix sit inside the field, on the same background as the value. Use them for the unit that belongs to the number: a currency symbol before, a % or kg after. Nothing focusable belongs there, and neither one adds to the field's accessible name. Inside a Form.Item with hasFeedback, the status icon is added to suffix beside yours.
addonBefore and addonAfter are slots too, and both are deprecated. For a unit selector, put the field and a Select in Space.Compact.
Events
onChange
onPressEnter
onStep
Styling
classNames and styles take the same part keys. Use them before a descendant selector, since the keys survive upgrades that rename internal classes.
1
<InputNumber
2
classNames={{
3
root: "…",
4
prefix: "…",
5
suffix: "…",
6
input: "…",
7
actions: "…",
8
}}
9
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root with a class does nothing, so style the part instead, or set the token in your theme.
API Reference
InputNumber
InputNumber's props. Rows marked antuikit in the Version column are added by the kit.