react-component/input-number

README

@rc-component/input-number

_{Part of the Ant Design ecosystem.}

🔢 Accessible React number input with precision, formatting, keyboard, and wheel support.

Highlights

Controlled and uncontrolled numeric input modes.
Decimal precision, custom parser, formatter, and decimal separator support.
Keyboard stepping, mouse wheel stepping, and custom step handlers.
Prefix, suffix, spinner controls, and semantic classNames / styles slots.
TypeScript generic value typing for number and string based value flows.

Install

npm install @rc-component/input-number

Usage

import InputNumber from '@rc-component/input-number';

export default () => <InputNumber min={0} max={100} defaultValue={10} />;

import InputNumber from '@rc-component/input-number';

export default () => (
  <InputNumber
    stringMode
    formatter={(value) => `$ ${value}`}
    parser={(displayValue) => displayValue?.replace(/\$\s?/g, '') || ''}
  />
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

InputNumber

Property	Type	Default	Description
allowClear	`boolean \| AllowClearConfig`	`false`	Show a clear button, optionally with a custom icon, disabled state, or accessible label.
autoFocus	`boolean`	`false`	Focus the input when mounted.
changeOnBlur	`boolean`	`true`	Commit value changes on blur.
changeOnWheel	`boolean`	`false`	Allow value changes from the mouse wheel.
className	`string`	-	Class name for the root element.
classNames	`Partial<Record<SemanticName, string>>`	-	Semantic class names for input-number slots.
controls	`boolean`	`true`	Show increment and decrement controls.
decimalSeparator	`string`	-	Decimal separator used by the display formatter.
defaultValue	`T`	-	Initial value.
disabled	`boolean`	`false`	Disable the input.
downHandler	`ReactNode`	-	Custom decrement control.
formatter	`(value: T \| undefined, info: { userTyping: boolean; input: string }) => string`	-	Format the displayed value.
inputMode	`string`	-	Native input `inputMode` attribute.
keyboard	`boolean`	`true`	Enable keyboard stepping.
max	`T`	-	Maximum value.
min	`T`	-	Minimum value.
mode	`'input' \| 'spinner'`	`input`	Render mode.
parser	`(displayValue: string \| undefined) => T`	-	Parse the displayed value back to a value.
precision	`number`	-	Display precision.
prefix	`ReactNode`	-	Prefix content.
prefixCls	`string`	`rc-input-number`	Class name prefix.
readOnly	`boolean`	`false`	Mark the input as read only.
step	`number \| string`	`1`	Step size.
stringMode	`boolean`	`false`	Keep values as strings for high precision decimals.
style	`React.CSSProperties`	-	Inline styles for the root element.
styles	`Partial<Record<SemanticName, React.CSSProperties>>`	-	Semantic styles for input-number slots.
suffix	`ReactNode`	-	Suffix content.
upHandler	`ReactNode`	-	Custom increment control.
value	`T \| null`	-	Controlled value.
onChange	`(value: T \| null) => void`	-	Triggered when the committed value changes.
onClear	`() => void`	-	Triggered when the clear button is clicked.
onInput	`(text: string) => void`	-	Triggered when the raw input text changes.
onPressEnter	`React.KeyboardEventHandler<HTMLInputElement>`	-	Triggered when Enter is pressed.
onStep	`(value: T, info: { offset: number \| string; type: 'up' \| 'down'; emitter: 'handler' \| 'keyboard' \| 'wheel' }) => void`	-	Triggered when the value changes by step.

Native input attributes such as id, name, placeholder, required, readOnly, and tabIndex are also supported unless explicitly overridden above.

Ref

import InputNumber, { type InputNumberRef } from '@rc-component/input-number';

const ref = React.useRef<InputNumberRef>(null);

ref.current?.focus();
ref.current?.blur();

Property	Type	Description
focus	`(options?: InputFocusOptions) => void`	Focus the input.
blur	`() => void`	Blur the input.
nativeElement	`HTMLElement`	Root native element.

Keyboard And Wheel

Arrow up and Arrow down change the value by step.
Shift + Arrow changes the value by 10 * step.
Ctrl / Command + Arrow changes the value by 0.1 * step.
Mouse wheel changes are opt-in through changeOnWheel.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/input-number is released under the MIT license.

Clear configuration

allowClear accepts a boolean or an AllowClearConfig object from @rc-component/util:

interface AllowClearConfig {
  clearIcon?: React.ReactNode;
  disabled?: boolean;
  tabIndex?: number;
  label?: string;
}

All fields are optional. disabled: true behaves like allowClear={false}: the clear button and space reserved solely for it are removed; the input remains editable. Existing suffixes and other content are preserved. This changes the previous hidden-button spacing behavior where applicable.

tabIndex affects only the clear button; -1 removes it from Tab navigation while retaining mouse activation. label supplies its accessible name through aria-label. Defaults, clear values, callbacks, and component state restrictions are unchanged.