#输入组

#用途

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/styles/a3s.css";

<div class="input-group">
  <input type="text" aria-label="搜索" placeholder="Search..." />
  <span data-align="start" aria-hidden="true"> <!-- icon --></span>
  <span data-align="end">12 results</span>
</div>

将 class="input-group" 添加到根目录。原生控件保持语义并成为该外壳内的无边界子控件。

<div class="input-group">

The root shell. Add role="group" and an accessible label only when the group itself needs to be named.

<input>, <textarea>, <select>

The native control. Use aria-invalid="true" for invalid state and disabled for disabled state.

<span>, <svg>, <kbd>

Decorative or helper content. Use aria-hidden="true" for decorative icons.

<button>, <div role="group">

Interactive actions. Use role="group" with an accessible label when multiple related actions share one side of the input.

<header>, <footer>

Header or footer addon rows for vertically oriented input groups.

data-align="start|end"

Optional visual placement. Values use logical direction, so start/end automatically flip in RTL. Use data-orientation="vertical" on the root for header/footer layouts.

[data-control]

Escape hatch for custom controls that are not native input, textarea, or select.

#示例

在插件包装器上使用 data-align="start|end" 将它们定位为内联。使用 data-orientation="vertical" 与 header 或 footer 进行块放置。

#内联启动

#直插端

#块启动

#区块结束

#图标

#文本

#按钮

#Kbd

#下拉菜单

#旋转器

#文本区域

#自定义输入

#RTL