---
title: InputNumber 数字输入框
order: 25
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

- 用于数据输入时，或者跟滑动输入条配套使用
- 定义输入框 3 种高度（40px，32px，24px)，默认 32 尺寸高度；宽度可以根据实际使用场景和数值最大值进行调整

### 基本使用

```jsx
import React from 'react';
import { InputNumber, Form } from 'quanta-design';

const labelCol = {
  span: 3,
};

const wrapperCol = {
  span: 21,
};

export default () => (
  <div>
    <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
      <Form.Item label="默认">
        <InputNumber min={1} max={10} defaultValue={3} />
      </Form.Item>
      <Form.Item label="小数">
        <InputNumber min={0} max={10} step={0.1} defaultValue={0.1} />
      </Form.Item>
      <Form.Item label="disabled">
        <InputNumber disabled defaultValue={99} />
      </Form.Item>
    </Form>
  </div>
);
```

### 尺寸大小

```jsx
import React from 'react';
import { InputNumber, Form } from 'quanta-design';

const labelCol = {
  span: 5,
};

const wrapperCol = {
  span: 19,
};

export default () => (
  <div>
    <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
      <Form.Item label="Large (40px)">
        <InputNumber min={1} max={10} defaultValue={3} size="large" />
      </Form.Item>
      <Form.Item label="Middle (32px 默认)">
        <InputNumber min={1} max={10} defaultValue={3} size="middle" />
      </Form.Item>
      <Form.Item label="Small (24px)">
        <InputNumber min={1} max={10} defaultValue={3} size="small" />
      </Form.Item>
    </Form>
  </div>
);
```

### 格式化配置

```jsx
import React from 'react';
import { InputNumber, Form } from 'quanta-design';

const labelCol = {
  span: 5,
};

const wrapperCol = {
  span: 19,
};

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="百分比">
      <InputNumber
        width={132}
        defaultValue={100}
        min={0}
        max={100}
        formatter={value => `${value}%`}
        parser={value => value.replace('%', '')}
      />
    </Form.Item>
    <Form.Item label="金额">
      <InputNumber
        width={132}
        defaultValue={1000}
        formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
        parser={value => value.replace(/\$\s?|(,*)/g, '')}
      />
    </Form.Item>
    <Form.Item label="带单位">
      <InputNumber defaultValue={0} suffix="ms" />
    </Form.Item>
  </Form>
);
```

## API

此组件是 `rc-input-number` 的封装，由于 `Antd` 组件也是对 `rc-components` 的封装，所以此组件的 API 与 Antd 大致相同。
在 rc-input-number 的基础上，新增了 `size`/`width` 两个属性，便于控制组件的尺寸、宽度。

| 属性     | 说明           | 类型                                 | 默认值  | 版本 |
| -------- | -------------- | ------------------------------------ | ------- | ---- |
| disabled | 按钮失效状态   | boolean                              | `false` |      |
| size     | 设置大小       | `large` \| `middle` \| `small` \| 无 |         |
| width    | 设置组件的宽度 | number                               | -       |      |