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.
| Input | Type | Default | Description |
|---|---|---|---|
id | 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`. |
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"`) โ visual only, distinct from `checked`. |
ariaLabel | string | null | null | Accessible name override when no visible `label` is provided. |
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. |
| Output | Type | Description |
|---|---|---|
checkboxChange | SenseCheckboxChangeEvent | Emitted on user toggle with the new checked state and resolved value. |
Accessibility
- Visible labels use
aria-labelledby; icon-only usesaria-label. indeterminatemirrors native state and exposesaria-checked="mixed".- Description text is referenced through
aria-describedby. - Implements
ControlValueAccessorfor Angular forms integration.