#表单字段

#用途

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

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

<fieldset class="fieldset">
  <legend>Profile</legend>
  <p>This appears on invoices and emails.</p>
  <div role="group" aria-label="Profile fields">
    <div role="group" class="field">
      <label for="name">Full name</label>
      <input id="name" autocomplete="off" placeholder="Evil Rabbit" />
      <p>This appears on invoices and emails.</p>
    </div>
    <div role="group" class="field" data-invalid>
      <label for="username">Username</label>
      <input id="username" autocomplete="off" aria-invalid="true" aria-describedby="username-error" />
      <p id="username-error" role="alert">Choose another username.</p>
    </div>
    <div role="group" class="field" data-orientation="horizontal">
      <input id="newsletter" type="checkbox" role="switch" />
      <label for="newsletter">Subscribe to the newsletter</label>
    </div>
  </div>
</fieldset>

#HTML 结构

<fieldset class="fieldset">

Native group for related fields. Use <legend> for the label and a following <p> for description.

<div role="group" class="fieldset">

Structural group when <fieldset> is not appropriate. Add aria-label or aria-labelledby.

<div role="group" class="field">

Single field wrapper. Add data-orientation when needed.

<label>

Label for the control. Use for when the control has an id.

<input>, <select>, <textarea>

Native form control. Put aria-invalid="true" on the invalid control, not only on the wrapper.

<section>

Optional content wrapper for label and description when the control sits beside text.

<p>

Helper text or error text. Use role="alert" for validation errors and connect it with aria-describedby.

#示例

#输入

#文本区域

#选择

#滑块

#现场组

#复选框

#收音机

#开关

#选择卡

Wrap a .field inside a <label> to create selectable field cards. This works with radio, checkbox, and switch controls.

#现场组

将字段堆叠在组内并使用 .field-separator 来划分部分。

#响应式布局

默认情况下使用 data-orientation="responsive" 堆叠，并在较宽的容器中切换为水平堆叠。

#验证和错误

将 data-invalid 添加到 .field，将 aria-invalid="true" 添加到无效控制。

#RTL

将 dir="rtl" 添加到字段、字段集或祖先。