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);
+
$
+
$
cascader

Using pre & post tabs example.

expand codeexpand code
import { InputNumber, Select, Space, Cascader } from 'antd';
import { SettingOutlined } from '@ant-design/icons';

const { Option } = Select;

const selectBefore = (
  <Select defaultValue="add" style={{ width: 60 }}>
    <Option value="add">+</Option>
    <Option value="minus">-</Option>
  </Select>
);
const selectAfter = (
  <Select defaultValue="USD" style={{ width: 60 }}>
    <Option value="USD">$</Option>
    <Option value="EUR"></Option>
    <Option value="GBP">£</Option>
    <Option value="CNY">¥</Option>
  </Select>
);

ReactDOM.render(
  <Space direction="vertical">
    <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
    <InputNumber addonBefore={selectBefore} addonAfter={selectAfter} defaultValue={100} />
    <InputNumber addonAfter={<SettingOutlined />} defaultValue={100} />
    <InputNumber
      addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
      defaultValue={100}
    />
  </Space>,
  mountNode,
);

Use stringMode to support high precision decimals support. onChange will return string value instead. You need polyfill of BigInt if browser not support.

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

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

ReactDOM.render(
  <InputNumber<string>
    style={{ width: 200 }}
    defaultValue="1"
    min="0"
    max="10"
    step="0.00000000000001"
    onChange={onChange}
    stringMode
  />,
  mountNode,
);

Control keyboard behavior by keyboard.

expand codeexpand code
import { InputNumber, Checkbox, Space } from 'antd';

const App = () => {
  const [keyboard, setKeyboard] = React.useState(true);
  return (
    <Space>
      <InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />
      <Checkbox
        onChange={() => {
          setKeyboard(!keyboard);
        }}
        checked={keyboard}
      >
        Toggle keyboard
      </Checkbox>
    </Space>
  );
};

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

Show warning style when value is out of range by control.

expand codeexpand code
import { InputNumber, Button, Space } from 'antd';

const Demo = () => {
  const [value, setValue] = React.useState<string | number>('99');

  return (
    <Space>
      <InputNumber min={1} max={10} value={value} onChange={setValue} />
      <Button
        type="primary"
        onClick={() => {
          setValue(99);
        }}
      >
        Reset
      </Button>
    </Space>
  );
};

ReactDOM.render(<Demo />, 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, Space } from 'antd';

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

ReactDOM.render(
  <Space>
    <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} />
  </Space>,
  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.

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

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

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

ReactDOM.render(
  <Space>
    <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}
    />
  </Space>,
  mountNode,
);

No border.

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

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

API#

PropertyDescriptionTypeDefaultVersion
addonAfterThe label text displayed after (on the right side of) the input fieldReactNode-
addonBeforeThe label text displayed before (on the left side of) the input fieldReactNode-
autoFocusIf get focus when component mountedbooleanfalse-
borderedWhether has border stylebooleantrue4.12.0
controlsWhether to show +- controlsbooleantrue4.17.0
decimalSeparatorDecimal separatorstring--
defaultValueThe initial valuenumber--
disabledIf disable the inputbooleanfalse-
formatterSpecifies the format of the value presentedfunction(value: number | string, info: { userTyping: boolean, input: string }): string-info: 4.17.0
keyboardIf enable keyboard behaviorbooleantrue4.12.0
maxThe max valuenumberNumber.MAX_SAFE_INTEGER-
minThe min valuenumberNumber.MIN_SAFE_INTEGER-
parserSpecifies the value extracted from formatterfunction(string): number--
precisionThe precision of input value. Will use formatter when config of formatternumber--
readOnlyIf readonly the inputbooleanfalse-
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-
stringModeSet value as string to support high precision decimals. Will return string value by onChangebooleanfalse4.13.0
valueThe current valuenumber--
onChangeThe callback triggered when the value is changedfunction(value: number | string | null)--
onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)--
onStepThe callback function that is triggered when click up or down buttons(value: number, info: { offset: number, type: 'up' | 'down' }) => void-4.7.0

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.

FAQ#

Why value can exceed min or max in control?#

Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.

Why dynamic change min or max which makes value out of range will not trigger onChange?#

onChange is user trigger event. Auto trigger will makes form lib can not detect data modify source.