# @uiw/react-input

> Input component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-input
pnpm add @uiw/react-input
yarn add @uiw/react-input
bun add @uiw/react-input
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 39 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 739 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | input, react-input, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-input
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/input
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-input

## Dependencies (2)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [@uiw/react-icon](https://npm.io/package/@uiw/react-icon.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 157 more at https://npm.io/package/@uiw/react-input/versions

## README

Input 输入框
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-input/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-input)
[![npm version](https://img.shields.io/npm/v/@uiw/react-input.svg?label=@uiw/react-input)](https://npmjs.com/@uiw/react-input)

通过鼠标或键盘输入内容，是最基础的表单域的包装。

```jsx
import { Input } from 'uiw';
// or
import Input from '@uiw/react-input';
```

### 基础用法

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />
    </div>
  );
}
```

### 数字输入框

```jsx mdx:preview&bg=#fff
import React from 'react';
import { InputNumber, Row, Col } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Row gutter={10}>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
          />
        </Col>
        <Col fixed>限制大小</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            min={1}
            max={10}
          />
        </Col>
        <Col fixed>超出限界警告</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            min={1}
            max={10}
            overLimitColor={'red'}
          />
        </Col>
        <Col fixed>设置步涨值</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            step={5}
          />
        </Col>
      </Row>
    </div>
  )
};
```

### Form 中使用 Input

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Input, InputNumber, Row, Col, Button, Notify } from 'uiw';

export default function Demo() {
  return (
    <Form
      onChange={({ initial, current }) => { }}
      onSubmitError={(error) => {
        console.log('error:', error)
        return error && error.filed ? { ...error.filed } : null;
      }}
      onSubmit={({initial, current}) => {
        if (current.input && current.input.length > 3) {
          Notify.success({
            title: '提交成功！',
            description: `填写：【${current.input.toString()}】！`
          });
        } else {
          Notify.error({ title: '提交失败！', description: '必须长度超过 3 个字符！' });
        }
        const ErrObj = {};
        if (current.input && current.input.length < 4) {
          ErrObj.input = '😆 必须长度超过 3 个字符！';
        }
        if(Object.keys(ErrObj).length > 0) {
          const err = new Error();
          err.filed = ErrObj;
          throw err;
        }
      }}
      fields={{
        input: {
          value: 'www',
          label: '请输入内容',
          help: '必须长度超过 3 个字符！',
          validator: (value = '') => value.length < 4 ? '必填选项！' : null,
          children: <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />,
        },
        inputNumber: {
          value: 'www',
          label: '请输入内容',
          help: '必须长度超过 3 个字符！',
          validator: (value = '') => value.length < 4 ? '必填选项！' : null,
          children: <InputNumber placeholder="请输入内容" style={{ maxWidth: 200 }} />,
        },
      }}
    >
      {({ fields, state, canSubmit }) => {
        return (
          <div>
            <Row>
              <Col>{fields.input}</Col>
            </Row>
            <Row>
              <Col>{fields.inputNumber}</Col>
            </Row>
            <Row>
              <Col>
                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
              </Col>
            </Row>
            <Row>
              <Col>
                <pre style={{ padding: 10, marginTop: 10 }}>
                  {JSON.stringify(state.current, null, 2)}
                </pre>
              </Col>
            </Row>
          </div>
        );
      }}
    </Form>
  );
}
```

### 插入图标

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input, Row, Col } from 'uiw';

const stylItem = { margin: 20 };
export default function Demo() {
  return (
    <div>
      <Row gutter={10}>
        <Col fixed>
          <Input preIcon="delete" placeholder="请输入内容" />
        </Col>
        <Col fixed>
          <Input preIcon="tag" placeholder="请输入内容" />
        </Col>
        <Col fixed>
          <Input preIcon="picasa" placeholder="请输入内容" />
        </Col>
        <Col fixed>
          <Input preIcon="like-o" placeholder="请输入内容" />
        </Col>
      </Row>
    </div>
  )
}
```

### 后面插入内容

向后面插入 [`Button`](#/components/button) 或者 [`Tag`](#/components/tag)

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input, Row, Col, Button, Tag } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Row gutter={10}>
        <Col fixed>
          <Input
            preIcon="like-o"
            placeholder="请输入密码"
            addonAfter={<Button icon="lock" size="small" basic type="light" />}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            placeholder="请输入内容"
            addonAfter={<Tag title="1000" color="#28a745" />}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="search"
            placeholder="请输入内容"
            addonAfter={<Button icon="apple" size="small" type="primary">按钮</Button>}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="primary">按钮</Button>}
          />
        </Col>
      </Row>
    </div>
  )
}
```

### 输入框尺寸

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input, Row, Col, Tag, Button } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col fixed>
          <Input
            preIcon="like-o"
            size="large"
            placeholder="请输入密码"
            addonAfter={<Button icon="lock" basic type="light" />}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="search"
            placeholder="请输入内容"
            addonAfter={<Button icon="arrow-right" basic size="small" type="light" />}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            size="small"
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="primary">按钮</Button>}
          />
        </Col>
      </Row>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col fixed>
          <Input
            preIcon="like-o"
            size="large"
            placeholder="请输入密码"
            addonAfter={<Tag title="1000" color="#28a745" />}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            placeholder="请输入内容"
            addonAfter={<Tag title="药丸" color="#1C7CEB" color="#40bf16">丸</Tag>}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            size="small"
            placeholder="请输入内容"
            addonAfter={<Tag title="1000" color="#28a745" />}
          />
        </Col>
      </Row>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col fixed>
          <Input
            preIcon="like-o"
            size="large"
            placeholder="请输入密码"
            addonAfter={<Button icon="apple" type="primary">按钮</Button>}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="search"
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="primary">搜索</Button>}
          />
        </Col>
        <Col fixed>
          <Input
            preIcon="tag"
            size="small"
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="primary">按钮</Button>}
          />
        </Col>
      </Row>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col fixed>
          <Input
            preIcon="like-o"
            placeholder="请输入密码"
            addonAfter={<Button size="small" type="light">亮按钮</Button>}
          />
        </Col>
        <Col fixed>
          <Input
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="danger">按钮</Button>}
          />
        </Col>
        <Col fixed>
          <Input
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="warning">按钮</Button>}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col fixed>
          <Input size="small" preIcon="like-o" placeholder="请输入密码" />
        </Col>
        <Col fixed>
          <Input size="small" placeholder="请输入内容" />
        </Col>
        <Col fixed>
          <Input
            size="small"
            preIcon="like-o"
            placeholder="请输入内容"
            addonAfter={<Button size="small" type="warning">按钮</Button>}
          />
        </Col>
      </Row>
    </div>
  )
}
```

### 密码输入框

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Input, Row, Col, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      btnIcon: 'lock',
    }
  }
  onClick() {
    this.setState({
      btnIcon: this.state.btnIcon === 'lock' ? 'unlock' : 'lock',
    })
  }
  render() {
    return (
      <Row gutter={10}>
        <Col fixed>
          <Input
            ref={(instance) => {
              if (instance) {
                console.log('instance:', instance);
              }
            }}
            preIcon="like-o"
            type={this.state.btnIcon === 'lock' ? 'password' : 'text'}
            placeholder="请输入密码"
            addonAfter={<Button icon={this.state.btnIcon} onClick={this.onClick.bind(this)} size="small" basic type="light" />}
          />
        </Col>
      </Row>
    )
  }
}

export default Demo;
```

### 输入框被禁用

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Icon, Input, Button, Row, Col} from 'uiw';

const stylItem = { margin: 20 };

export default function Demo() {
  return (
    <Row gutter={10}>
      <Col fixed>
        <Input disabled preIcon="delete" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input disabled preIcon="tag" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input
          disabled
          preIcon="picasa"
          placeholder="请输入内容"
          addonAfter={
            <Button icon="close" disabled size="small" basic type="light" />
          }
        />
      </Col>
      <Col fixed>
        <Input disabled preIcon="like-o" placeholder="请输入内容" />
      </Col>
    </Row>
  );
}
```

## Input

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|--------- |-------- |--------- |-------- |-------- |
| value | 绑定值 | String | - |
| disabled | 禁用输入框 | Boolean | `false` |
| preIcon | 输入框`前`面放置图标  | String/ReactNode | - |
| addonAfter | 	带标签的 input，设置后置标签 | String/ReactNode | - |
| size | 指定输入框的尺寸，除了默认的大小外，还提供了 `large`、`small` 和 `default` 三种尺寸。 | String | - |
| inputStyle | 传递给input的样式，在需要动态设置样式场景下使用 | Object | - | v4.18.2 |

## InputNumber
在v4.18.2中增加

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|--------- |-------- |--------- |-------- |-------- |
| min | 最小值 | Number | - |
| max | 最大值 | Number | - |
| step | 设置步长值 | Number | - |
| overLimitColor | 允许超出`min`,`max`限制, 使用该警告色显示 | String | - |

更多属性文档请参考 Input。

---
_Source: https://npm.io/package/@uiw/react-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._