Ant Design InputNumber

There are three sizes available to a numeric input box. By default, the size is 32px. The two additional sizes are

Syntax

The InputNumber component in Ant Design has the following syntax:

import { InputNumber } from 'antd';

<InputNumber />

Use and Importance

The InputNumber component is used to allow users to input numeric values in a convenient and user-friendly way. It's an essential component for any form that requires numeric input, such as payment forms, quantity input, and price input.

The InputNumber component provides a range of features, including limits on input values, precision settings, and accessibility features. You can customize the component's appearance and behavior to fit your specific needs, allowing you to create high-quality and responsive forms quickly.

Example

Here is an example of an InputNumber component in use:

import { InputNumber } from 'antd';

const QuantityInput = () => {
  const handleChange = (value) => {
    console.log('Quantity:', value);
  };

  return (
    <div>
      <label>Quantity:</label>
      <InputNumber
        min={1}
        max={10}
        defaultValue={1}
        onChange={handleChange}
      />
    </div>
  );
};

export default QuantityInput;

In this example, an InputNumber component is used to allow users to input a quantity value between 1 and 10. The onChange function will log the current value of the InputNumber component.

Summary

The InputNumber component in Ant Design is an essential tool for allowing users to input numeric values in your web forms. With customizable limits, precision settings, and accessibility features, the InputNumber component provides a user-friendly way to collect numerical data. Use the InputNumber component to quickly and easily create responsive and high-quality forms in your web applications.