ArtificialSenseDocs

Docs / Components

SenseCheckboxComponent

Accessible checkbox from @artificialsenselabs/ui with label, description, and indeterminate state.

Live demo: run nx serve showcase and open /components/checkbox (port 4202).

Overview

Category: Form / inputs. Selector: sense-checkbox. Import: import { SenseCheckboxComponent } from '@artificialsenselabs/ui';

<sense-checkbox
  label="Email newsletter"
  description="Monthly product updates."
  [(ngModel)]="subscribed"
/>

API

Generated from libs/ui/src/lib/checkbox/sense-checkbox/sense-checkbox.component.ts โ€” run pnpm run docs:api to refresh.

Inputs
InputTypeDefaultDescription
idstring | nullnull Native input `id`; auto-generated when unset. Used for label association.
namestring | nullnull Native control `name` for form submission.
labelstring | nullnull Visible label text.
descriptionstring | nullnull Supporting description rendered under the label and wired via `aria-describedby`.
requiredbooleanfalse Marks the control required for validation and ARIA.
disabledbooleanfalse Disables interaction and dims the control.
readonlybooleanfalse Renders read-only: value is shown but cannot be changed.
indeterminatebooleanfalse Tri-state indeterminate (`aria-checked="mixed"`) โ€” visual only, distinct from `checked`.
ariaLabelstring | nullnull Accessible name override when no visible `label` is provided.
trueValueunknowntrue Value emitted through the form model when checked (defaults to `true`).
falseValueunknownfalse Value emitted through the form model when unchecked (defaults to `false`).
variantSenseSurfaceVariant'outlined' Checkbox control chrome.
checkedbooleanfalse Two-way checked state (`[(checked)]`); also drives the CVA form value.
Outputs
OutputTypeDescription
checkboxChangeSenseCheckboxChangeEventEmitted on user toggle with the new checked state and resolved value.

Accessibility

  • Visible labels use aria-labelledby; icon-only uses aria-label.
  • indeterminate mirrors native state and exposes aria-checked="mixed".
  • Description text is referenced through aria-describedby.
  • Implements ControlValueAccessor for Angular forms integration.