输入

安装Terminal

npm install github:A3S-Lab/UI#d2799d3914d2d291fbf0c2c3e638e2380ce266c0

<input class="input" type="email" aria-label="电子邮箱" placeholder="Email" />

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

用途

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

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

Add your input HTML

Add class="input" to supported <input> elements. Inputs inside a class="field" container also receive the same styling automatically for common text-like input types.

使用原生HTML属性来实现：disabled用于禁止输入，required用于必填字段行为，aria-invalid="true"用于无效状态样式。

<input class="input" type="email" aria-label="电子邮箱" placeholder="Email" />

示例

基本

现场

使用带有标签和说明的 field 创建可访问字段。

Enter your email address.

字段组

First name

Last name

<div class="grid gap-4">
  <div role="group" class="field">
    <label for="input-first-name">First name</label>
    <input id="input-first-name" type="text" placeholder="Jane" />
  </div>
  <div role="group" class="field">
    <label for="input-last-name">Last name</label>
    <input id="input-last-name" type="text" placeholder="Doe" />
  </div>
</div>

已禁用

无效

文件

内联

网格

<div class="grid gap-4 md:grid-cols-2">
  <input class="input" type="text" aria-label="名字" placeholder="First name" />
  <input class="input" type="text" aria-label="姓氏" placeholder="Last name" />
  <input class="input md:col-span-2" type="email" aria-label="电子邮箱" placeholder="Email" />
</div>

必填

Username *

<div role="group" class="field">
  <label for="input-required">Username <span class="text-destructive">*</span></label>
  <input id="input-required" type="text" placeholder="hunvreus" required />
</div>

徽章

Email Recommended

<div role="group" class="field">
  <label for="input-badge" class="flex w-full items-center gap-2">
    Email
    <span class="badge ml-auto" data-variant="secondary">Recommended</span>
  </label>
  <input id="input-badge" type="email" placeholder="m@example.com" />
</div>

输入组

使用 Input Group 模式在输入内添加图标、文本或按钮。

<div class="relative">
  <input class="input ps-9" type="search" aria-label="搜索" placeholder="Search..." />
  <div class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4"><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>
  </div>
</div>

按钮组

当输入应与顶层按钮组时，请使用按钮组。

<div role="group" aria-label="Search" class="button-group">
  <input class="input" type="search" aria-label="搜索" placeholder="Search..." />
  <button type="submit" class="btn" data-variant="outline" data-size="icon" aria-label="Search"><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></button>
</div>

表格

<form class="space-y-6">
  <div role="group" class="field">
    <label for="input-form-username">Username</label>
    <input id="input-form-username" type="text" placeholder="hunvreus" required />
    <p>This is your public display name.</p>
  </div>
  <div role="group" class="field">
    <label for="input-form-email">Email</label>
    <input id="input-form-email" type="email" placeholder="m@example.com" required />
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

RTL

输入通过原生浏览器方向处理支持从右到左的布局。将 dir="rtl" 添加到输入、字段或祖先。

مفتاح API

مفتاح API الخاص بك مشفر ومخزن بأمان.

<div role="group" class="field" dir="rtl">
  <label for="input-rtl-api-key">مفتاح API</label>
  <input id="input-rtl-api-key" type="password" placeholder="sk-..." />
  <p>مفتاح API الخاص بك مشفر ومخزن بأمان.</p>
</div>

#输入

#用途

Include CSS

Add your input HTML

#示例

#基本

#现场

#字段组

#已禁用

#无效

#文件

#内联

#网格

#必填

#徽章

#输入组

#按钮组

#表格

#RTL

输入

用途

示例

基本

现场

字段组

已禁用

无效

文件

内联

网格

必填

徽章

输入组

按钮组

表格

RTL