ICEN UI
ICEN UI 输入框
Docs ⌘K
Core · 稳定

输入框

单行与多行输入的外壳族：前后缀、清除钮、密码切换、计数与掩码。

Preview
表单 input
¥ 元

输入掩码 · 手机号 / 信用卡

html
<div class="demo-col">  <div class="icen-input-wrap icen-control icen-input-wrap--sm">    <input class="icen-input" placeholder="小号（28px）" />  </div>  <div class="icen-input-wrap icen-control">    <input class="icen-input" placeholder="默认（34px）" />  </div>  <div class="icen-input-wrap icen-control icen-input-wrap--lg">    <input class="icen-input" placeholder="大号（42px）" />  </div></div><div class="demo-col" style="margin-top:16px">  <div class="icen-input-wrap icen-control">    <span class="icen-input-leading">¥</span>    <input class="icen-input" placeholder="0.00" />    <span class="icen-input-trailing">元</span>  </div>  <div class="icen-input-wrap icen-control">    <input class="icen-input" value="可清空的内容" aria-label="可清空输入示例" />    <button class="icen-input-clear" type="button" aria-label="清空"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div>  <div class="icen-input-wrap icen-control">    <input class="icen-input" type="password" value="secret-123" aria-label="密码示例" />    <button class="icen-input-pw-toggle" type="button"><svg data-icen-icon="show" width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2.2 10s3-5.4 7.8-5.4S17.8 10 17.8 10s-3 5.4-7.8 5.4S2.2 10 2.2 10ZM10 12.4a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z"/></svg><svg data-icen-icon="hide" hidden width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2.2 10s3-5.4 7.8-5.4S17.8 10 17.8 10s-3 5.4-7.8 5.4S2.2 10 2.2 10ZM10 12.4a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8ZM3.5 3.5l13 13"/></svg></button>  </div>  <div class="icen-input-wrap icen-control">    <input class="icen-input" value="带字符计数" maxlength="20" aria-label="字符计数示例" />  </div>  <div class="icen-input-wrap icen-control is-error">    <input class="icen-input" value="校验未通过的内容" aria-label="校验失败示例" />  </div>  <div class="icen-input-wrap icen-control is-disabled">    <input class="icen-input" disabled placeholder="禁用态" />  </div></div><div class="demo-col" style="margin-top:16px">  <p class="chart-cap" style="margin:0 0 6px">输入掩码 · 手机号 / 信用卡</p>  <div class="icen-input-wrap icen-control" style="width:100%;max-width:240px">    <input class="icen-input" data-icen-mask="###-####-####" placeholder="138-1234-5678" />  </div>  <div class="icen-input-wrap icen-control" style="width:100%;max-width:280px">    <input class="icen-input" data-icen-mask="####-####-####-####" placeholder="4111-2222-3333-4444" />  </div>  <div class="icen-textarea-wrap icen-control">    <textarea class="icen-textarea" data-icen-autosize data-icen-min-rows="3" data-icen-max-rows="6" maxlength="100" placeholder="带字符计数 + 自适应高度的多行文本（最多 100 字）"></textarea>  </div>  <div class="icen-input-wrap icen-control input-wrap--search">    <span class="icen-input-leading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.3 13.3 17 17M14.5 8.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0"></path></svg></span>    <input class="icen-input" type="search" placeholder="搜索文档、组件、令牌…" />    <button class="icen-input-clear" type="button" aria-label="清空"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div></div>

特性

专用搜索框用 enhanceSearchField：单个清空钮、自动派发 input 并保留焦点。

接口

初始化
initInput()（kit 一行入口可直接命名导入）
导出
enhanceSearchFieldinitInput
事件
icen:otp-complete detail 契约见 IcenEventMap
类型
dist/behaviors/input.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import { initInput } from '@icen.ai/ui/kit/input';initInput();

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add input

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/input.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

js
import { initInput, enhanceSearchField } from '@icen.ai/ui/kit/input';initInput(); // 清除钮 / 密码切换 / textarea autosize / OTP / 字符计数 / 输入掩码// 专用搜索容器：一个 SVG 清空按钮，自动派发 input 并保留输入焦点。const search = enhanceSearchField(searchInput);search.refresh(); // 程序修改 value 后同步按钮；disabled / readonly 自动同步。// 页面卸载：search.destroy();<!-- 字符计数 --><input class="icen-input" maxlength="20" /><!-- 输入掩码（# 数字 / A 字母 / * 任意） --><input class="icen-input" data-icen-mask="###-####-####" placeholder="手机号" /><input class="icen-input" data-icen-mask="####-####-####-####" placeholder="信用卡" /><!-- blur 自动去空白 --><input class="icen-input" data-icen-trim />