表单布局
字段结构（form / form-field / form-label / form-hint / form-error）+ 裸 form-input / form-textarea + 页面级 banner-ok / banner-err 横幅。与 input.css 的 wrapper 互补：input 处理"单控件外壳"，form 处理"字段→label→hint 的纵向布局"。
<form class="form" style="max-width:420px"> <fieldset class="form-field"> <label class="form-label" for="demo-form-name">作品名称<span class="req">*</span></label> <input class="form-input" id="demo-form-name" placeholder="3-30 个字符" value="星野之下" /> <span class="form-hint">必填，3–30 个字符，可含中英文与数字</span> </fieldset> <fieldset class="form-field"> <label class="form-label" for="demo-form-desc">简介</label> <textarea class="form-textarea" id="demo-form-desc" placeholder="一句话介绍"></textarea> <span class="form-hint">选填，最多 200 字</span> </fieldset> <fieldset class="form-field" data-invalid="true"> <label class="form-label" for="demo-form-slug">Slug<span class="req">*</span></label> <input class="form-input" id="demo-form-slug" data-invalid="true" value="ab" /> <span class="form-error">Slug 至少 3 个字符</span> </fieldset> <fieldset class="form-field"> <label class="form-label" for="demo-form-disabled">禁用示例</label> <input class="form-input" id="demo-form-disabled" value="只读内容" disabled /> </fieldset></form><div class="banner-ok banner-block" style="margin-top:20px">✓ 已保存：表单校验通过</div><div class="banner-err banner-block">✗ 提交失败：网络错误，请稍后重试</div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/form';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add form
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/form.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<form class="form"> <fieldset class="form-field"> <label class="form-label" for="x">姓名<span class="req">*</span></label> <input class="form-input" id="x" /> <span class="form-hint">辅助提示</span> <span class="form-error">错误信息</span> </fieldset></form><!-- form-input 同时支持原生 :invalid 与 [data-invalid=true] 驱动错误态 -->