Checkbox

Checkbox lets people select zero, one, or several non-exclusive options. Use it for choices that are submitted with a form; use Switch for a binary setting that takes effect immediately.

Receive release status

Select the channels that should notify the team.

Send a summary when a release succeeds or fails.

Desktop notification

Notify only while this device is online.

Text message

This workspace has no text-message provider configured.

InstallTerminal

npm install @a3s-lab/ui@0.4.1

<div class="field" data-orientation="horizontal">
  <input class="input" type="checkbox" id="include-logs" name="include-logs" />
  <label for="include-logs">Include diagnostic logs</label>
</div>

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

Usage

Import Tailwind and the complete A3S style bundle:

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

Add the input class to a native checkbox and associate it with a label. A single input can pair directly with its label.

<div class="field" data-orientation="horizontal">
  <input class="input" type="checkbox" id="include-logs" name="include-logs" />
  <label for="include-logs">Include diagnostic logs</label>
</div>

For component-level loading, import the base styles, Checkbox structure, Field structure, and the A3S visual style in that order. See Installation for CDN and other integrations.

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

Parameters

Parameter	Value	Purpose
Root	`<input type="checkbox">`	Preserves native form, keyboard, and accessibility semantics
`class`	`input`	Applies Checkbox structure and visual styles
`checked`	Boolean attribute	Marks the option selected; on server-rendered pages, use it only for the real default
`disabled`	Boolean attribute	Prevents interaction; also add `data-disabled` to the owning `.field`
`aria-invalid`	`true`	Exposes a failed validation state
`aria-describedby`	Element ID	Associates help, constraints, or error text
`indeterminate`	DOM property	Indicates partial child selection; it is not a third submitted value

States and variants

Unchecked and checked are the normal interactive states. Disabled choices must explain why they are unavailable. Show invalid state only after submission or field departure so the page does not open with premature errors.

Include source files

Include build cache

Confirm that sensitive data was removed

Confirmation is required before export.

Include audit archive

Only workspace owners can change this option.

<div class="grid gap-4">
    <div class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="state-selected-en" name="state-selected" defaultChecked />
      <label for="state-selected-en">Include source files</label>
    </div>
    <div class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="state-unselected-en" name="state-unselected" />
      <label for="state-unselected-en">Include build cache</label>
    </div>
    <div class="field" data-orientation="horizontal" data-invalid>
      <input class="input" type="checkbox" id="state-required-en" name="state-required" aria-invalid="true" aria-describedby="state-required-error-en" />
      <section>
        <label for="state-required-en">Confirm that sensitive data was removed</label>
        <p id="state-required-error-en" role="alert">Confirmation is required before export.</p>
      </section>
    </div>
    <div class="field" data-orientation="horizontal" data-disabled>
      <input class="input" type="checkbox" id="state-disabled-en" name="state-disabled" disabled />
      <section>
        <label for="state-disabled-en">Include audit archive</label>
        <p>Only workspace owners can change this option.</p>
      </section>
    </div>
  </div>

indeterminate is a DOM property commonly used by a “select all” control. Form submission still follows checked, so applications must maintain both values explicitly.

Export scopes

Some scopes are selected.

Select all scopes

Documents

Notes

Assets

<fieldset class="fieldset" data-checkbox-select-all-demo="en">
    <legend data-variant="label">Export scopes</legend>
    <p data-checkbox-select-all-status aria-live="polite">Some scopes are selected.</p>
    <div class="grid gap-3">
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-all-en" data-checkbox-select-all />
        <label for="export-all-en">Select all scopes</label>
      </div>
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-docs-en" name="export-scope" value="docs" defaultChecked data-checkbox-select-item />
        <label for="export-docs-en">Documents</label>
      </div>
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-notes-en" name="export-scope" value="notes" data-checkbox-select-item />
        <label for="export-notes-en">Notes</label>
      </div>
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-assets-en" name="export-scope" value="assets" defaultChecked data-checkbox-select-item />
        <label for="export-assets-en">Assets</label>
      </div>
    </div>
  </fieldset>

const selectAll = document.querySelector("#select-all");
const selectedCount = 2;
const totalCount = 5;

selectAll.checked = selectedCount === totalCount;
selectAll.indeterminate = selectedCount > 0 && selectedCount < totalCount;

Multiple choices

Group related options with fieldset and legend. A label answers what the option is; supporting copy explains its consequence or constraint. Do not place an entire description inside the label.

Choose content to export

Select at least one item before starting the export.

Documents

Comments and annotations

Version history

<fieldset class="fieldset">
    <legend data-variant="legend">Choose content to export</legend>
    <p>Select at least one item before starting the export.</p>
    <div class="grid gap-3">
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-documents-en" name="export-content" value="documents" defaultChecked />
        <label for="export-documents-en">Documents</label>
      </div>
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-comments-en" name="export-content" value="comments" defaultChecked />
        <label for="export-comments-en">Comments and annotations</label>
      </div>
      <div class="field" data-orientation="horizontal">
        <input class="input" type="checkbox" id="export-history-en" name="export-content" value="history" />
        <label for="export-history-en">Version history</label>
      </div>
    </div>
  </fieldset>

<form
    class="grid gap-3"
    data-checkbox-validation-demo="en"
    novalidate
    onsubmit="event.preventDefault(); const confirm = this.querySelector('#export-confirm-en'); const error = this.querySelector('#export-confirm-error-en'); const status = this.querySelector('[data-checkbox-status]'); const field = confirm.closest('.field'); if (this.getAttribute('aria-busy') === 'true') return; field.removeAttribute('data-invalid'); confirm.removeAttribute('aria-invalid'); error.hidden = true; if (!confirm.checked) { field.dataset.invalid = 'true'; confirm.setAttribute('aria-invalid', 'true'); error.hidden = false; status.textContent = 'Fix confirmation before exporting.'; return; } status.textContent = 'Export confirmed.'; this.dataset.exportState = 'confirmed';"
    onreset="const confirm = this.querySelector('#export-confirm-en'); const error = this.querySelector('#export-confirm-error-en'); const status = this.querySelector('[data-checkbox-status]'); const field = confirm.closest('.field'); field.removeAttribute('data-invalid'); confirm.removeAttribute('aria-invalid'); error.hidden = true; status.textContent = 'Ready to confirm export.'; this.removeAttribute('data-export-state');"
  >
    <div class="field" data-orientation="horizontal">
      <input class="input" type="checkbox" id="export-confirm-en" name="export-confirm" required aria-describedby="export-confirm-help-en" />
      <section>
        <label for="export-confirm-en">I removed sensitive data from this export</label>
        <p id="export-confirm-help-en" data-field-description>Required before the archive leaves the workspace.</p>
        <p id="export-confirm-error-en" role="alert" hidden>Confirmation is required before export.</p>
      </section>
    </div>
    <p data-checkbox-status aria-live="polite">Ready to confirm export.</p>
    <div class="flex flex-wrap gap-2">
      <button class="btn" type="submit">Export archive</button>
      <button class="btn" type="reset">Reset</button>
    </div>
  </form>

Row selection inside a table belongs to the complete interaction model of Table or Data Grid. Its “select all” control must synchronize visible rows, cross-page scope, and indeterminate state; do not present an inert table gallery in Checkbox documentation.

Accessibility

Every checkbox needs an accessible name, preferably a visible label paired through id.
Group related options with fieldset and legend; do not add redundant role="group" to an ordinary .field.
Space toggles a focused native checkbox. Do not replace browser behavior with a custom click handler or block label activation.
Associate help and error copy with aria-describedby; set aria-invalid="true" when validation fails.
Keep the label and unavailability reason visible for disabled options. If users still need to understand or copy the content, disable only the control rather than hiding the row.
indeterminate communicates partial selection visually and semantically; form submission still follows checked.

#Checkbox

#Usage

#Parameters

#States and variants