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.

expand codeexpand code
import { InputNumber } from 'antd';

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

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

Click the button to toggle between available and disabled states.

expand codeexpand code
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);

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

expand codeexpand code
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,
);

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.

expand codeexpand code
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;
}

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.

expand codeexpand code
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#

PropertyDescriptionTypeDefault
autoFocusIf get focus when component mountedbooleanfalse
defaultValueThe initial valuenumber-
disabledIf disable the inputbooleanfalse
formatterSpecifies the format of the value presentedfunction(value: number | string): string-
maxThe max valuenumberNumber.MAX_SAFE_INTEGER
minThe min valuenumberNumber.MIN_SAFE_INTEGER
parserSpecifies the value extracted from formatterfunction(string): number-
precisionThe precision of input valuenumber-
decimalSeparatorDecimal separatorstring-
sizeThe height of input boxlarge | middle | small-
stepThe number to which the current value is increased or decreased. It can be an integer or decimalnumber | string1
valueThe current valuenumber-
onChangeThe callback triggered when the value is changedfunction(value: number | string)-
onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)-

Methods#

NameDescription
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.

FormInput