#输入组
12 条结果
安装Terminal
npm install @a3s-lab/ui@0.2.0<div class="input-group">
<input type="text" aria-label="搜索" placeholder="搜索…" />
<span data-align="start" aria-hidden="true"> <!-- icon --></span>
<span data-align="end">12 条结果</span>
</div>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用途
引入 CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者只导入基础 CSS、输入组组件 CSS 和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/styles/a3s.css";使用 CDN 或打包工具导入？请参阅安装页。
添加输入组 HTML
<div class="input-group">
<input type="text" aria-label="搜索" placeholder="搜索…" />
<span data-align="start" aria-hidden="true"> <!-- icon --></span>
<span data-align="end">12 条结果</span>
</div>在根元素上添加 class="input-group"。原生控件保留自身语义，并作为组合外壳内的无边界子控件。
<div class="input-group">输入组的外层容器。只有当组合本身需要命名时，才添加
role="group"和无障碍标签。<input>,<textarea>,<select>- 原生输入控件。无效状态使用
aria-invalid="true"，禁用状态使用disabled。 <span>,<svg>,<kbd>- 装饰或辅助内容。纯装饰图标使用
aria-hidden="true"。 <button>,<div role="group">- 交互操作。同一侧有多个相关操作时，使用带无障碍标签的
role="group"。 <header>,<footer>- 垂直输入组的头部或底部附加行。
data-align="start|end"- 可选的视觉位置。值采用逻辑方向，因此 start/end 会在 RTL 中自动翻转。头部或底部布局需要在根元素上使用
data-orientation="vertical"。 [data-control]- 用于非原生
input、textarea或select的自定义控件。
#示例
在附加内容容器上使用 data-align="start|end" 将其放在行内两侧。配合 data-orientation="vertical"、header 或 footer 可创建块级布局。
#行内起始
图标位于行内起始侧。
<div class="field">
<label for="inline-start-input">输入框</label>
<div class="input-group">
<input id="inline-start-input" type="text" placeholder="搜索…" />
<span role="group" data-align="start" aria-hidden="true"><svg class="text-muted-foreground lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></span>
</div>
<p>图标位于行内起始侧。</p>
</div>#行内末端
图标位于行内末端。
<div class="field">
<label for="inline-end-input">输入框</label>
<div class="input-group">
<input id="inline-end-input" type="password" placeholder="输入密码" />
<span role="group" data-align="end" aria-hidden="true"><svg class="lucide lucide-eye-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" /><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" /><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" /><path d="m2 2 20 20" /></svg></span>
</div>
<p>图标位于行内末端。</p>
</div>#块级起始
头部位于输入框上方。
头部位于文本区域上方。
<div role="group" aria-label="块级起始输入组示例" class="fieldset">
<div class="field">
<label for="block-start-input">输入框</label>
<div class="input-group" data-orientation="vertical">
<input id="block-start-input" type="text" placeholder="输入姓名" />
<header data-align="start">
<span>姓名</span>
</header>
</div>
<p>头部位于输入框上方。</p>
</div>
<div class="field">
<label for="block-start-textarea">文本区域</label>
<div class="input-group" data-orientation="vertical">
<textarea id="block-start-textarea" class="font-mono text-sm" placeholder="console.log('Hello, world!');"></textarea>
<header data-align="start"><svg class="text-muted-foreground lucide lucide-file-code" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="M10 12.5 8 15l2 2.5" /><path d="m14 12.5 2 2.5-2 2.5" /></svg>
<span class="font-mono">script.js</span>
<button type="button" class="btn ml-auto size-6" data-variant="ghost" data-size="icon-sm" aria-label="复制"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
</header>
</div>
<p>头部位于文本区域上方。</p>
</div>
</div>#块级末端
底部附加内容位于输入框下方。
底部附加内容位于文本区域下方。
<div role="group" aria-label="块级末端输入组示例" class="fieldset">
<div class="field">
<label for="block-end-input">输入框</label>
<div class="input-group" data-orientation="vertical">
<input id="block-end-input" type="text" placeholder="输入金额" />
<footer data-align="end">
<span>USD</span>
</footer>
</div>
<p>底部附加内容位于输入框下方。</p>
</div>
<div class="field">
<label for="block-end-textarea">文本区域</label>
<div class="input-group" data-orientation="vertical">
<textarea id="block-end-textarea" placeholder="写下评论…"></textarea>
<footer data-align="end">
<span>0/280</span>
<button type="button" class="btn ml-auto" data-size="sm">发布</button>
</footer>
</div>
<p>底部附加内容位于文本区域下方。</p>
</div>
</div>#图标
<div class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="搜索" placeholder="搜索…" />
<span data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></span>
</div>
<div class="input-group">
<input type="email" aria-label="电子邮箱" placeholder="输入邮箱" />
<span data-align="start" aria-hidden="true"><svg class="lucide lucide-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /><rect x="2" y="4" width="20" height="16" rx="2" /></svg></span>
</div>
<div class="input-group">
<input type="text" aria-label="卡号" placeholder="卡号" />
<span data-align="start" aria-hidden="true"><svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg></span>
<span data-align="end" aria-hidden="true"><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
</div>
<div class="input-group">
<input type="text" aria-label="卡号" placeholder="卡号" />
<span data-align="end" aria-hidden="true"><svg class="lucide lucide-star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /></svg><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></span>
</div>
</div>#文本
$USD
https://.com
@company.com
<div class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="金额" placeholder="0.00" />
<span data-align="start">$</span>
<span data-align="end">USD</span>
</div>
<div class="input-group">
<input type="text" aria-label="域名" placeholder="example.com" />
<span data-align="start">https://</span>
<span data-align="end">.com</span>
</div>
<div class="input-group">
<input type="text" aria-label="用户名" placeholder="输入用户名" />
<span data-align="end">@company.com</span>
</div>
<div class="input-group" data-orientation="vertical">
<textarea aria-label="消息" placeholder="输入消息"></textarea>
<footer data-align="end">
<span class="text-xs text-muted-foreground">120 characters left</span>
</footer>
</div>
</div>#按钮
https://
<div class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="个人资料链接" readonly placeholder="https://example.com/profile" />
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" data-align="end" aria-label="复制" title="复制"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
</div>
<div class="input-group [--radius:9999px]">
<button type="button" class="btn" data-variant="secondary" data-size="icon-xs" data-align="start" aria-label="连接信息"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></button>
<span data-align="start" class="text-muted-foreground">https://</span>
<input type="text" id="input-secure-19" aria-label="安全链接" />
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" data-align="end" aria-label="收藏"><svg class="lucide lucide-star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /></svg></button>
</div>
<div class="input-group">
<input type="text" aria-label="搜索" placeholder="输入关键词…" />
<button type="button" class="btn" data-size="xs" data-variant="secondary" data-align="end">搜索</button>
</div>
</div>#Kbd
⌘K
<div class="input-group">
<input type="text" aria-label="搜索" placeholder="搜索…" />
<span data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></span>
<span data-align="end"><kbd class="kbd">⌘K</kbd></span>
</div>#下拉菜单
设置
复制路径
打开所在位置
文档
博客文章
更新日志
<div class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="文件名" placeholder="输入文件名" />
<div id="dropdown-menu-601971" class="dropdown-menu" data-align="end">
<button type="button" id="dropdown-menu-601971-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-601971-menu" aria-expanded="false" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="打开文件操作"><svg class="lucide lucide-ellipsis" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg></button>
<div id="dropdown-menu-601971-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32">
<div role="menu" id="dropdown-menu-601971-menu" aria-labelledby="dropdown-menu-601971-trigger">
<div id="dropdown-menu-601971-items-1" role="menuitem">设置</div>
<div id="dropdown-menu-601971-items-2" role="menuitem">复制路径</div>
<div id="dropdown-menu-601971-items-3" role="menuitem">打开所在位置</div>
</div>
</div>
</div>
</div>
<div class="input-group [--radius:1rem]">
<input type="text" aria-label="搜索查询" placeholder="输入搜索内容" />
<div id="dropdown-menu-689868" class="dropdown-menu" data-align="end">
<button type="button" id="dropdown-menu-689868-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-689868-menu" aria-expanded="false" class="btn pr-1.5! text-xs" data-variant="ghost" data-size="xs">
搜索范围…
<svg class="size-3 lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</button>
<div id="dropdown-menu-689868-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32 [--radius:0.95rem]">
<div role="menu" id="dropdown-menu-689868-menu" aria-labelledby="dropdown-menu-689868-trigger">
<div id="dropdown-menu-689868-items-1" role="menuitem">文档</div>
<div id="dropdown-menu-689868-items-2" role="menuitem">博客文章</div>
<div id="dropdown-menu-689868-items-3" role="menuitem">更新日志</div>
</div>
</div>
</div>
</div>
</div>#加载指示器
正在保存…
请稍候…
<div class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="搜索状态" placeholder="正在搜索…" />
<span data-align="end"><svg aria-label="加载中" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span>
</div>
<div class="input-group">
<input type="text" aria-label="处理状态" placeholder="正在处理…" />
<span data-align="start"><svg aria-label="加载中" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span>
</div>
<div class="input-group">
<input type="text" aria-label="保存状态" placeholder="正在保存更改…" />
<span data-align="end">
正在保存…
<svg aria-label="加载中" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
</span>
</div>
<div class="input-group">
<input type="text" aria-label="刷新状态" placeholder="正在刷新数据…" />
<span data-align="start" aria-hidden="true"><svg class="animate-spin lucide lucide-loader" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4" /><path d="m16.2 7.8 2.9-2.9" /><path d="M18 12h4" /><path d="m16.2 16.2 2.9 2.9" /><path d="M12 18v4" /><path d="m4.9 19.1 2.9-2.9" /><path d="M2 12h4" /><path d="m4.9 4.9 2.9 2.9" /></svg></span>
<span data-align="end" class="text-muted-foreground">请稍候…</span>
</div>
</div>#文本区域
<div class="input-group min-h-[200px]" data-orientation="vertical">
<textarea aria-label="代码编辑器" placeholder="console.log('Hello, world!');"></textarea>
<footer data-align="end" class="border-t">
<span>第 1 行，第 1 列</span>
<button type="button" class="btn ml-auto" data-size="sm">
运行
<svg class="lucide lucide-corner-down-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4v7a4 4 0 0 1-4 4H4" /><path d="m9 10-5 5 5 5" /></svg>
</button>
</footer>
<header data-align="start" class="border-b"><svg class="text-muted-foreground lucide lucide-file-code" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="M10 12.5 8 15l2 2.5" /><path d="m14 12.5 2 2.5-2 2.5" /></svg>
<span>script.js</span>
<div role="group" aria-label="文件操作" class="ml-auto flex gap-1">
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="刷新文件"><svg class="lucide lucide-refresh-ccw" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path d="M16 16h5v5" /></svg></button>
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="复制文件"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
</div>
</header>
</div>#自定义输入
<div class="input-group" data-orientation="vertical">
<textarea data-control aria-label="消息" placeholder="自动调整高度的文本区域…" class="field-sizing-content min-h-16 resize-none"></textarea>
<footer data-align="end">
<button type="button" class="btn ml-auto" data-size="sm">提交</button>
</footer>
</div>#RTL
١٢ نتيجة
جاري الحفظ...
تذييل موضع أسفل منطقة النص.
<div dir="rtl" class="grid gap-6">
<div class="input-group">
<input type="text" aria-label="بحث" placeholder="بحث..." />
<span role="group" data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></span>
<span role="group" data-align="end">١٢ نتيجة</span>
</div>
<div class="input-group">
<input type="text" aria-label="حالة البحث" placeholder="جاري البحث..." />
<span role="group" data-align="end"><svg aria-label="加载中" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span>
</div>
<div class="input-group">
<input type="text" aria-label="حالة الحفظ" placeholder="جاري حفظ التغييرات..." />
<span role="group" data-align="end">
جاري الحفظ...
<svg aria-label="加载中" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
</span>
</div>
<div class="field">
<label for="rtl-textarea">منطقة النص</label>
<div class="input-group" data-orientation="vertical">
<textarea id="rtl-textarea" placeholder="اكتب تعليقًا..."></textarea>
<footer data-align="end">
<span>٠/٢٨٠</span>
<button type="button" class="btn ms-auto" data-size="sm">نشر</button>
</footer>
</div>
<p>تذييل موضع أسفل منطقة النص.</p>
</div>
</div>