# @hi-ui/input > A sub-package for @hi-ui/hiui. Latest version **5.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @hi-ui/input pnpm add @hi-ui/input yarn add @hi-ui/input bun add @hi-ui/input ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.0 | | Published | 2026-06-06 | | First published | 2021-08-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 148.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 879 | | Author | HiUI | | Maintainers | sivan, solarjoker, lanzhi_lee, zhouyun | ## Links - npm: https://www.npmjs.com/package/@hi-ui/input - Repository: https://github.com/XiaoMi/hiui - Homepage: https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme - Issues: https://github.com/XiaoMi/hiui/issues - npm.io page: https://npm.io/package/@hi-ui/input ## Dependencies (10) - [@hi-ui/env](https://npm.io/package/@hi-ui/env.md) ^5.0.0 - [@hi-ui/icons](https://npm.io/package/@hi-ui/icons.md) ^5.0.0 - [@hi-ui/classname](https://npm.io/package/@hi-ui/classname.md) ^5.0.0 - [@hi-ui/dom-utils](https://npm.io/package/@hi-ui/dom-utils.md) ^5.0.0 - [@hi-ui/func-utils](https://npm.io/package/@hi-ui/func-utils.md) ^5.0.0 - [@hi-ui/use-latest](https://npm.io/package/@hi-ui/use-latest.md) ^5.0.0 - [@hi-ui/type-assertion](https://npm.io/package/@hi-ui/type-assertion.md) ^5.0.0 - [@hi-ui/use-merge-refs](https://npm.io/package/@hi-ui/use-merge-refs.md) ^5.0.0 - [@hi-ui/use-merge-semantic](https://npm.io/package/@hi-ui/use-merge-semantic.md) ^5.0.0 - [@hi-ui/use-uncontrolled-state](https://npm.io/package/@hi-ui/use-uncontrolled-state.md) ^5.0.0 ## Recent versions - 5.0.0 (latest) — 2026-06-06 - 5.0.0-rc.0 (rc) — 2026-06-02 - 5.0.0-experimental.2 (experimental) — 2026-03-08 - 5.0.0-canary.19 (canary) — 2026-03-08 - 5.0.0-alpha.0 (alpha) — 2025-09-29 - 4.0.0-beta.23 (feature) — 2022-07-20 - 5.0.0-experimental.1 — 2026-02-12 - 5.0.0-canary.18 — 2026-02-12 - 5.0.0-experimental.0 — 2026-02-05 - 5.0.0-canary.17 — 2025-12-15 - 5.0.0-canary.16 — 2025-12-03 - 5.0.0-canary.15 — 2025-11-19 - 5.0.0-canary.14 — 2025-11-12 - 5.0.0-canary.13 — 2025-09-23 - 5.0.0-canary.12 — 2025-09-10 - … 91 more at https://npm.io/package/@hi-ui/input/versions ## README # Input 输入框 用来接收文本型内容的组件 ## 何时使用 用户需要通过键盘输入内容时 常见于表单，作为表单的组件类型之一 ## 使用示例 ## Input Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | ------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------- | ------- | | value | 设置输入框的值 | string | - | - | | defaultValue | 设置输入框的默认值 | string | - | - | | type | 设置输入框类型 | string | 'text' \| 'textarea' \| 'id' \| 'tel' \| 'card' \| 'amount' \| 'email' | 'text' | | prepend | 输入框前置外部内容 | ReactNode | - | - | | append | 输入框后置外部内容 | ReactNode | - | - | | disabled | 是否禁用 | boolean | true \| false | false | | clearable | 是否可清空 | boolean | true \| false | false | | placeholder | 输入框占位符 | string | - | - | | readOnly | 开启输入框只读 | boolean | true \| false | false | | autoFocus | 开启输入框自动聚焦 | boolean | true \| false | false | | maxLength | 输入最大长度 | number | - | - | | prefix | 输入框内置内容 | ReactNode | - | - | | suffix | 输入框后置内容 | ReactNode | - | - | | trimValueOnBlur | 开启失焦时触发对值的 trim，将触发 onChange 给用户 | boolean | true \| false | false | | clearableTrigger | 清除按钮展示的触发形态 | string | 'always' | 'hover' | 'hover' | | appearance | 设置展现形式 | 'line' \| 'unset' \| 'filled' | 'line' | | size | 设置尺寸 | string | 'sm' \| 'md' \| 'lg' | 'md' | ## Input Events | 名称 | 说明 | 类型 | 参数 | | -------- | -------------- | ------------------------------------------------------- | --------------------- | | onChange | 值改变时的回调 | (event: React.ChangeEvent) => void | event: input 事件对象 | ## TextArea Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ------------------------------------------------- | ----------------------------- | -------------------- | ------ | | value | 设置输入框的值 | string | - | - | | defaultValue | 设置输入框的默认值 | string | - | - | | appearance | 设置展现形式 | 'line' \| 'unset' \| 'filled' | 'line' | | size | 设置尺寸 | string | 'sm' \| 'md' \| 'lg' | 'md' | | disabled | 是否禁用 | boolean | true \| false | false | | placeholder | 输入框占位符 | string | - | - | | readOnly | 开启输入框只读 | boolean | true \| false | false | | autoFocus | 开启输入框自动聚焦 | boolean | true \| false | false | | maxLength | 输入最大长度 | number | - | - | | trimValueOnBlur | 开启失焦时触发对值的 trim，将触发 onChange 给用户 | boolean | true \| false | false | | rows | 设置文本域行数，超出触发滚动 | number | - | - | ## TextArea Events | 名称 | 说明 | 类型 | 参数 | | -------- | -------------- | ------------------------------------------------------- | ------------------------ | | onChange | 值改变时的回调 | (event: React.ChangeEvent) => void | event: textarea 事件对象 | ## CHANGELOG | 参数 | 变更类型 | 变更内容 | 解决的问题 | | ---------------- | ------------------------------- | --------------------------------- | ---------------------------------------------------------------------- | | propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 | | ---- | ---- | ---- | ---- | | bordered | deprecated | 字段 `bordered` => `appearance` | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值 | | appearance | feature | - | 统一支持适配 UI：线性\面性\无边框 | | prepend | update | 字段：prepend -> prepend + prefix | 强化支持 Input 内置外置元素组合 | | append | update | 字段 -> append + suffix | 强化支持 Input 内置外置元素组合 | | prefix | feature | 字段：prepend -> prepend + prefix | 强化支持 Input 内置元素 | | suffix | feature | 字段 -> append + suffix | 强化支持 Input 内置元素 | | readOnly | feature | - | 强化支持 Input 功能 | | autoFocus | feature | - | 强化支持 Input 功能 | | maxLength | feature | - | 强化支持 Input 功能 | | trimValueOnBlur | feature | - | 强化支持 Input 功能 | | clearableTrigger | feature | - | 强化支持 Input 清空内容功能 | | size | feature | - | UI 适配不同 Size | | TextArea | feature | 组件拆分 | 1. 拆解 api 功能及类型，职责分明 2. 减少用户使用困惑； | --- _Source: https://npm.io/package/@hi-ui/input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._