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

## TODO
+ 自定义 `Password` 的 EyeIcon
+ 自定义 `Search` 的 SerachIcon
+ 前置／后置 图标垂直居中问题

## 使用

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

### 基本使用

```jsx
import React from 'react';
import { Input, Form } from 'baas-ui';

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 'baas-ui';

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 (34px 默认)">
        <Input size="middle" placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
      <Form.Item label="Small (30px)">
        <Input size="small" placeholder="请输入内容" style={{ width: 320 }} />
      </Form.Item>
    </Form>
  </div>
);
```

### 前置 / 后置

```jsx
import React from 'react';
import { Input, Select, Icons } from 'baas-ui';

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 'baas-ui';

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

### 密码框
```jsx
import React from 'react';
import { Input } from 'baas-ui';

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

### 搜索框

```jsx
import React from 'react';
import { Input } from 'baas-ui';

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