For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/components/checkbox.md.

复选框

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

安装Terminal

npm install @a3s-lab/ui@0.3.0

<input type="checkbox" class="input" />

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

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

Add your checkbox HTML

Add class="input" to checkbox inputs. Pair it with Field and a native <label> for layout and labeling.

<input type="checkbox" class="input" />

示例

基本

Pair the checkbox with field and a native <label> for proper layout and labeling.

Accept terms and conditions

<div role="group" class="fieldset">
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="terms-checkbox-basic" name="terms-checkbox-basic" class="input" />
    <label for="terms-checkbox-basic">Accept terms and conditions</label>
  </div>
</div>

说明

使用 section 和段落作为帮助文本。

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

<div role="group" class="fieldset">
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="terms-checkbox-desc" name="terms-checkbox-desc" class="input" defaultChecked aria-describedby="terms-checkbox-desc-description" />
    <section>
      <label for="terms-checkbox-desc">Accept terms and conditions</label>
      <p id="terms-checkbox-desc-description">By clicking this checkbox, you agree to the terms and conditions.</p>
    </section>
  </div>
</div>

已禁用

使用 disabled 属性来防止交互，并将 data-disabled 添加到 .field 组件以禁用样式。

Enable notifications

<div role="group" class="fieldset">
  <div role="group" class="field" data-orientation="horizontal" data-disabled>
    <input type="checkbox" id="toggle-checkbox-disabled" name="toggle-checkbox-disabled" class="input" disabled />
    <label for="toggle-checkbox-disabled">Enable notifications</label>
  </div>
</div>

无效

在复选框上设置 aria-invalid="true"，在字段包装器上设置 data-invalid 以显示无效样式。

Accept terms and conditions

<div role="group" class="fieldset">
  <div role="group" class="field" data-orientation="horizontal" data-invalid>
    <input type="checkbox" id="terms-checkbox-invalid" name="terms-checkbox-invalid" class="input" aria-invalid="true" />
    <label for="terms-checkbox-invalid">Accept terms and conditions</label>
  </div>
</div>

组

使用多个字段创建复选框列表。

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

<fieldset class="fieldset">
  <legend data-variant="label">Show these items on the desktop:</legend>
  <p>Select the items you want to show on the desktop.</p>
  <div role="group" aria-label="Desktop items" data-slot="checkbox-group">
    <div role="group" class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="finder-pref-9k2-hard-disks-ljj-checkbox" name="finder-pref-9k2-hard-disks-ljj-checkbox" defaultChecked />
      <label for="finder-pref-9k2-hard-disks-ljj-checkbox" class="font-normal">Hard disks</label>
    </div>
    <div role="group" class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="finder-pref-9k2-external-disks-1yg-checkbox" name="finder-pref-9k2-external-disks-1yg-checkbox" defaultChecked />
      <label for="finder-pref-9k2-external-disks-1yg-checkbox" class="font-normal">External disks</label>
    </div>
    <div role="group" class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="finder-pref-9k2-cds-dvds-fzt-checkbox" name="finder-pref-9k2-cds-dvds-fzt-checkbox" />
      <label for="finder-pref-9k2-cds-dvds-fzt-checkbox" class="font-normal">CDs, DVDs, and iPods</label>
    </div>
    <div role="group" class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="finder-pref-9k2-connected-servers-6l2-checkbox" name="finder-pref-9k2-connected-servers-6l2-checkbox" />
      <label for="finder-pref-9k2-connected-servers-6l2-checkbox" class="font-normal">Connected servers</label>
    </div>
  </div>
</fieldset>

表

Name	Email	Role
Sarah Chen	sarah.chen@example.com	Admin
Marcus Rodriguez	marcus.rodriguez@example.com	User
Priya Patel	priya.patel@example.com	User
David Kim	david.kim@example.com	Editor

<div class="table-container">
  <table class="table" data-checkbox-table>
    <thead>
      <tr>
        <th class="w-8"><input type="checkbox" id="select-all-checkbox" name="select-all-checkbox" class="input" aria-label="Select all" /></th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr data-state="selected">
        <td><input type="checkbox" id="row-1-checkbox" name="row-1-checkbox" class="input" aria-label="Select Sarah Chen" defaultChecked /></td>
        <td class="font-medium">Sarah Chen</td>
        <td>sarah.chen@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="row-2-checkbox" name="row-2-checkbox" class="input" aria-label="Select Marcus Rodriguez" /></td>
        <td class="font-medium">Marcus Rodriguez</td>
        <td>marcus.rodriguez@example.com</td>
        <td>User</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="row-3-checkbox" name="row-3-checkbox" class="input" aria-label="Select Priya Patel" /></td>
        <td class="font-medium">Priya Patel</td>
        <td>priya.patel@example.com</td>
        <td>User</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="row-4-checkbox" name="row-4-checkbox" class="input" aria-label="Select David Kim" /></td>
        <td class="font-medium">David Kim</td>
        <td>david.kim@example.com</td>
        <td>Editor</td>
      </tr>
    </tbody>
  </table>
</div>

RTL

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

قبول الشروط والأحكام

بالنقر على هذا المربع، فإنك توافق على الشروط.

تفعيل الإشعارات

يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.

<div role="group" class="fieldset" dir="rtl">
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="terms-checkbox-rtl" name="terms-checkbox" class="input" />
    <label for="terms-checkbox-rtl">قبول الشروط والأحكام</label>
  </div>
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="terms-checkbox-2-rtl" name="terms-checkbox-2" class="input" defaultChecked aria-describedby="terms-checkbox-2-rtl-description" />
    <section>
      <label for="terms-checkbox-2-rtl">قبول الشروط والأحكام</label>
      <p id="terms-checkbox-2-rtl-description">بالنقر على هذا المربع، فإنك توافق على الشروط.</p>
    </section>
  </div>
  <div role="group" class="field" data-orientation="horizontal" data-disabled>
    <input type="checkbox" id="toggle-checkbox-rtl" name="toggle-checkbox" class="input" disabled />
    <label for="toggle-checkbox-rtl">تفعيل الإشعارات</label>
  </div>
  <label>
    <div role="group" class="field" data-orientation="horizontal">
      <input type="checkbox" id="toggle-checkbox-2-rtl" name="toggle-checkbox-2" class="input" />
      <section>
        <h3>تفعيل الإشعارات</h3>
        <p>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</p>
      </section>
    </div>
  </label>
</div>

#复选框

Enable notifications

#用途

Include CSS

Add your checkbox HTML

#示例

#基本

#说明

#已禁用

#无效

#组

#表

#RTL

تفعيل الإشعارات

复选框

用途

示例

基本

说明

已禁用

无效

组

表

RTL