<div class="grid gap-4" data-label-association-demo="zh">
    <div class="grid gap-2">
      <label class="label" for="label-workspace-zh">
        工作区名称
        <span class="ms-auto text-xs font-normal text-muted-foreground" aria-hidden="true">必填</span>
      </label>
      <input class="input" id="label-workspace-zh" type="text" name="workspace" required aria-describedby="label-workspace-help-zh" />
      <p id="label-workspace-help-zh" data-field-description>显示在控件旁，而不是只留在占位符里。</p>
    </div>
    <div class="grid gap-2" data-disabled="true">
      <label class="label" for="label-locked-zh">账单联系人</label>
      <input class="input" id="label-locked-zh" type="email" value="owner@example.com" disabled />
      <p data-field-description>禁用态仍保持标签可读，不伪造语义。</p>
    </div>
  </div>

用法

引入 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/label.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

添加标签 HTML

为 <label> 元素添加 class="label"。

<label class="label" for="email">你的电子邮箱</label>

示例

RTL

在标签或其祖先上添加 dir="rtl"。

البريد الإلكتروني

<div class="grid gap-3" dir="rtl">
  <label class="label" for="email-rtl">البريد الإلكتروني</label>
  <input class="input" id="email-rtl" type="email" placeholder="name@example.com" />
</div>

#标签

#用法

引入 CSS

添加标签 HTML

#示例

#RTL

标签

用法

示例

RTL