For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.2.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.2.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.2.0/components/input.md.
  • 简体中文
  • v0.2.0
  • 输入

    Live previewHTML · CSS · JavaScript

    用途

    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" />

    示例

    基本

    Live previewHTML · CSS · JavaScript

    现场

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

    Live previewHTML · CSS · JavaScript

    Enter your email address.

    现场组

    Live previewHTML · CSS · JavaScript

    已禁用

    Live previewHTML · CSS · JavaScript

    无效

    Live previewHTML · CSS · JavaScript

    文件

    Live previewHTML · CSS · JavaScript

    内联

    Live previewHTML · CSS · JavaScript

    网格

    Live previewHTML · CSS · JavaScript

    必填

    Live previewHTML · CSS · JavaScript

    徽章

    Live previewHTML · CSS · JavaScript

    输入组

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

    Live previewHTML · CSS · JavaScript

    按钮组

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

    Live previewHTML · CSS · JavaScript

    表格

    Live previewHTML · CSS · JavaScript

    This is your public display name.

    RTL

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

    Live previewHTML · CSS · JavaScript

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