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

      • Checkbox

      Live previewHTML · CSS · JavaScript

      By clicking this checkbox, you agree to the terms.

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

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

      Or import only the base CSS, Checkbox component CSS, and one style pack.

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

      Using CDN or bundler imports? See the Installation page.

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

      Examples

      Basic

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

      Live previewHTML · CSS · JavaScript

      Description

      Use a section and paragraph for helper text.

      Live previewHTML · CSS · JavaScript

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

      Disabled

      Use the disabled attribute to prevent interaction and add data-disabled to the .field component for disabled styles.

      Live previewHTML · CSS · JavaScript

      Invalid

      Set aria-invalid="true" on the checkbox and data-invalid on the field wrapper to show invalid styles.

      Live previewHTML · CSS · JavaScript

      Group

      Use multiple fields to create a checkbox list.

      Live previewHTML · CSS · JavaScript
      Show these items on the desktop:

      Select the items you want to show on the desktop.

      Table

      Live previewHTML · CSS · JavaScript
      NameEmailRole
      Sarah Chensarah.chen@example.comAdmin
      Marcus Rodriguezmarcus.rodriguez@example.comUser
      Priya Patelpriya.patel@example.comUser
      David Kimdavid.kim@example.comEditor

      RTL

      Add dir="rtl" to the field group or an ancestor.

      Live previewHTML · CSS · JavaScript

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