---
title: Input 输入框
order: 10
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

- 自定义 `Password` 的 EyeIcon
- 前置／后置 图标垂直居中问题

## 使用

### 使用原则

- 40px 高度使用场景：需要重点突出的信息输入；例：登录注册、官网等；
- 32px 高度使用场景：默认输入框高度；例：列表上方，表单等；
- 30px 高度使用场景：特殊情况下使用；例：搭配 30 尺寸按钮使用等；

### 基本使用

```jsx
import React from 'react';
import { Input, 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="默认">
        <Input placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
      <Form.Item label="disabled">
        <Input disabled placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
    </Form>
  </div>
);
```

### 尺寸大小

```jsx
import React from 'react';
import { Input, 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)">
        <Input size="large" placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
      <Form.Item label="Middle (32px 默认)">
        <Input size="middle" placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
      <Form.Item label="Small (24px)">
        <Input size="small" placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
    </Form>
  </div>
);
```

### 前置 / 后置

```jsx
import React from 'react';
import { Input, Select, Icons } from 'quanta-design';

const { Option } = Select;
const { SettingIcon, UserIcon, RmbIcon } = Icons;

const selectBefore = (
  <Select defaultValue="http://">
    <Option value="http://">http://</Option>
    <Option value="https://">https://</Option>
  </Select>
);
const selectAfter = (
  <Select defaultValue=".com">
    <Option value=".com">.com</Option>
    <Option value=".jp">.jp</Option>
    <Option value=".cn">.cn</Option>
    <Option value=".org">.org</Option>
  </Select>
);

const depSelect = (
  <Select defaultValue="开放平台部">
    <Option value="开放平台部">开放平台部</Option>
    <Option value="基础平台部">基础平台部</Option>
    <Option value="设计部">设计部</Option>
  </Select>
);

export default () => (
  <div style={{ width: 320 }}>
    <div style={{ marginBottom: 16 }}>
      <Input
        addonBefore="http://"
        addonAfter=".com"
        defaultValue="这是已输入的内容"
      />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input
        addonBefore={selectBefore}
        addonAfter={selectAfter}
        defaultValue="这是已输入的内容"
      />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input addonAfter={<SettingIcon />} defaultValue="这是已输入的内容" />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input addonBefore="+86" placeholder="请输入手机号" />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input addonBefore={depSelect} placeholder="请输入手机号" />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input prefix={<UserIcon />} placeholder="请输入用户姓名" />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input prefix={<RmbIcon />} suffix="RMB" placeholder="请输入金额" />
    </div>
  </div>
);
```

### 文本框

```jsx
import React from 'react';
import { Input } from 'quanta-design';

export default () => (
  <Input.TextArea
    rows={4}
    placeholder="请输入更新原因"
    style={{ width: 320 }}
  />
);
```

### 密码框

```jsx
import React from 'react';
import { Input } from 'quanta-design';

export default () => (
  <Input.Password placeholder="请输入密码" style={{ width: 320 }} />
);
```

### 搜索框

```jsx
import React from 'react';
import { Input, Button } from 'quanta-design';

export default () => (
  <div style={{ width: 320 }}>
    <div style={{ marginBottom: 16 }}>
      <Input.Search
        placeholder="请输入搜索内容"
        onSearch={() => console.log('Search')}
      />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input.Search
        placeholder="请输入搜索内容"
        enterButton
        onSearch={() => console.log('Search')}
      />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input.Search
        placeholder="请输入搜索内容"
        enterButton="Search"
        onSearch={() => console.log('Search')}
        loading
      />
    </div>
  </div>
);
```