SenseCheckbox — ArtificialSense UI

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
Input	Type	Default	Description
`inputId`	`string \| null`	`null`	Native input `id`; auto-generated when unset. Used for label association.
`name`	`string \| null`	`null`	Native control `name` for form submission.
`label`	`string \| null`	`null`	Visible label text.
`description`	`string \| null`	`null`	Supporting description rendered under the label and wired via `aria-describedby`.
`error`	`string \| null`	`null`	Validation error message; sets `aria-invalid` and a live alert region.
`required`	`boolean`	`false`	Marks the control required for validation and ARIA.
`disabled`	`boolean`	`false`	Disables interaction and dims the control.
`readonly`	`boolean`	`false`	Renders read-only: value is shown but cannot be changed.
`indeterminate`	`boolean`	`false`	Tri-state indeterminate (`aria-checked="mixed"`) until the user toggles the control.
`size`	`SenseCheckboxSize`	`'md'`	Control density — `sm`, `md` (default), or `lg`.
`ariaLabel`	`string \| null`	`null`	Accessible name override when no visible `label` is provided.
`ariaLabelledby`	`string \| null`	`null`	External label ids for `aria-labelledby` when the visible label is rendered elsewhere.
`autofocus`	`boolean`	`false`	Focuses the native checkbox after the first render when true.
`trueValue`	`unknown`	`true`	Value emitted through the form model when checked (defaults to `true`).
`falseValue`	`unknown`	`false`	Value emitted through the form model when unchecked (defaults to `false`).
`variant`	`SenseSurfaceVariant`	`'outlined'`	Checkbox control chrome.
`checked`	`boolean`	`false`	Two-way checked state (`[(checked)]`); also drives the CVA form value. Its `checkedChange` is the canonical change event (ADR-0056 D1/D2).

Outputs
Output	Type	Description
`checkboxChange`	`SenseCheckboxChangeEvent`	Emitted on user toggle with the new checked state and resolved value.
`checkboxFocus`	`FocusEvent`	Emitted when the native checkbox receives focus.
`checkboxBlur`	`FocusEvent`	Emitted when the native checkbox loses focus.

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.

Overview

API

Accessibility