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 (
      <div>
        <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>
      </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(
  <div>
    <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}
    />
  </div>,
  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;
}

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
autoFocusget focus when component mountedbooleanfalse
defaultValueinitial valuenumber
disableddisable the inputbooleanfalse
formatterSpecifies the format of the value presentedfunction(value: number | string): string
maxmax valuenumberInfinity
minmin valuenumber-Infinity
parserSpecifies the value extracted from formatterfunction( string): number
precisionprecision of input valuenumber
decimalSeparatordecimal separatorstring
sizeheight of input boxlarge | middle | small
stepThe number to which the current value is increased or decreased. It can be an integer or decimal.number|string1
typeHTML inputs can have a type of number, and this can be added to aid mobile broswer keyboards to show the number keybaord, as well as limit inputs to numbers only 0-9 and e, but will not guaruntee client and server side validation.string - ie 'number'
valuecurrent valuenumber
onChangeThe callback triggered when the value is changed.function(value: number | string)
onPressEnterThe callback function that is triggered when Enter key is pressed.function(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