¥
元
<div class="demo-col"> <div class="input-wrap control input-wrap--sm"> <input class="input" placeholder="小号（32px）" /> </div> <div class="input-wrap control"> <input class="input" placeholder="默认（36px）" /> </div> <div class="input-wrap control input-wrap--lg"> <input class="input" placeholder="大号（40px）" /> </div></div><div class="demo-col" style="margin-top:16px"> <div class="input-wrap control"> <span class="input-leading">¥</span> <input class="input" placeholder="0.00" /> <span class="input-trailing">元</span> </div> <div class="input-wrap control"> <input class="input" value="点右侧 × 可清空" /> <button class="input-clear" type="button" aria-label="清空"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button> </div> <div class="input-wrap control"> <input class="input" type="password" value="secret-123" /> <button class="input-pw-toggle" type="button"><svg data-icon="show" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><svg data-icon="hide" hidden width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-2.16 3.19"/><path d="M6.61 6.61A17.4 17.4 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 5.17-1.34"/><line x1="2" x2="22" y1="2" y2="22"/></svg></button> </div> <div class="input-wrap control is-error"> <input class="input" value="校验未通过的内容" /> </div> <div class="input-wrap control is-disabled"> <input class="input" disabled placeholder="禁用态" /> </div></div><div class="demo-col" style="margin-top:16px"> <div class="textarea-wrap control"> <textarea class="textarea" data-autosize data-min-rows="3" data-max-rows="6" placeholder="输入多行文本，高度随内容自适应（3–6 行）"></textarea> </div> <div class="input-wrap control input-wrap--search"> <span class="input-leading"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span> <input class="input" type="search" placeholder="搜索文档、组件、令牌…" /> <button class="input-clear" type="button" aria-label="清空"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initInput } from '@icen.ai/ui/kit/input';initInput();也可以用脚手架直接打印引入行：
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 项目无此问题。
用法
import { initInput } from '@icen.ai/ui/behaviors/input';initInput(); // 清除钮 / 密码切换 / textarea autosize / OTP