InputNumber

Enter a number within certain range with the mouse or keyboard.

When To Use#

When a numeric value needs to be provided.

Examples

Numeric-only input box.

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />, mountNode);

Disabled

Click the button to toggle between available and disabled states.

import { InputNumber, Button } from 'antd';

class App extends React.Component {
  state = {
    disabled: true,
  };

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    });
  };

  render() {
    return (
      <>
        <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
        <div style={{ marginTop: 20 }}>
          <Button onClick={this.toggle} type="primary">
            Toggle disabled
          </Button>
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Formatter

Display value within it's situation with formatter, and we usually use parser at the same time.

Here is a Intl.NumberFormat InputNumber implementation: https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(
  <>
    <InputNumber
      defaultValue={1000}
      formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
      parser={value => value.replace(/\$\s?|(,*)/g, '')}
      onChange={onChange}
    />
    <InputNumber
      defaultValue={100}
      min={0}
      max={100}
      formatter={value => `${value}%`}
      parser={value => value.replace('%', '')}
      onChange={onChange}
    />
  </>,
  mountNode,
);

Sizes

There are three sizes available to a numeric input box. By default, the size is 32px. The two additional sizes are large and small which means 40px and 24px, respectively.

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(
  <div className="site-input-number-wrapper">
    <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
    <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
    <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
  </div>,
  mountNode,
);
.code-box-demo .ant-input-number {
  margin-right: 10px;
}
.ant-row-rtl .code-box-demo .ant-input-number {
  margin-right: 0;
  margin-left: 10px;
}

Decimals

A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.

import { InputNumber } from 'antd';

function onChange(value) {
  console.log('changed', value);
}

ReactDOM.render(<InputNumber min={0} max={10} step={0.1} onChange={onChange} />, mountNode);

API#

Property	Description	Type	Default	Version
autoFocus	If get focus when component mounted	boolean	false	-
decimalSeparator	Decimal separator	string	-	-
defaultValue	The initial value	number	-	-
disabled	If disable the input	boolean	false	-
formatter	Specifies the format of the value presented	function(value: number \| string): string	-	-
max	The max value	number	Number.MAX_SAFE_INTEGER	-
min	The min value	number	Number.MIN_SAFE_INTEGER	-
parser	Specifies the value extracted from formatter	function(string): number	-	-
precision	The precision of input value	number	-	-
readOnly	If readonly the input	boolean	false	-
size	The height of input box	`large` \| `middle` \| `small`	-	-
step	The number to which the current value is increased or decreased. It can be an integer or decimal	number \| string	1	-
value	The current value	number	-	-
onChange	The callback triggered when the value is changed	function(value: number \| string \| null)	-	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-	-
onStep	The callback function that is triggered when click up or down buttons	(value: number, info: { offset: number, type: 'up' \| 'down' }) => void	-	4.7.0

Methods#

Name	Description
blur()	Remove focus
focus()	Get focus

Notes#

Per issues #21158, #17344, #9421, and documentation about inputs, it appears this community does not support native inclusion of the type="number" in the <Input /> attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.