# Checkbox Checkbox builds on the shared field foundation, so it supports labels, helper and error text, validation hooks, disabled and readonly states, and Angular forms integration. It also adds checkbox-specific shape options and an indeterminate state for partially selected groups. ## Import ```ts import { CheckboxComponent } from 'ui'; ``` ## Basic selection ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-basic-example', standalone: true, imports: [FormsModule, CheckboxComponent], template: `

`, }) export class CheckboxBasicExampleComponent { protected acceptTerms = false; protected subscribeUpdates = true; protected rememberDevice = true; } ``` ## Label positions ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-label-positions-example', standalone: true, imports: [FormsModule, CheckboxComponent], template: `

Hidden visible label

`, }) export class CheckboxLabelPositionsExampleComponent { protected afterValue = true; protected beforeValue = false; protected aboveValue = true; protected belowValue = false; protected hiddenLabelValue = true; } ``` ## Shapes and density ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-shapes-example', standalone: true, imports: [FormsModule, CheckboxComponent], template: `

`, }) export class CheckboxShapesExampleComponent { protected roundedValue = true; protected circularValue = false; protected squareValue = true; } ``` ## States and indeterminate ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-states-example', standalone: true, imports: [FormsModule, CheckboxComponent], template: `

Partial selection

`, }) export class CheckboxStatesExampleComponent { protected requiredValue = false; protected masterValue = false; protected masterIndeterminate = true; protected criticalValue = true; protected billingValue = false; protected syncMasterState(): void { const selectedCount = Number(this.criticalValue) + Number(this.billingValue); if (selectedCount === 0) { this.masterIndeterminate = false; this.masterValue = false; return; } if (selectedCount === 2) { this.masterIndeterminate = false; this.masterValue = true; return; } this.masterValue = false; this.masterIndeterminate = true; } } ``` ## Filter group pattern ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-filter-group-example', standalone: true, imports: [FormsModule, CheckboxComponent], template: `

Issue filters

Narrow backlog results without leaving the current view.

`, }) export class CheckboxFilterGroupExampleComponent { protected assignedToMe = true; protected createdThisWeek = false; protected includesBlocked = true; protected customerImpact = false; } ``` ## Permissions panel ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { ButtonComponent, CheckboxComponent } from 'ui'; @Component({ selector: 'app-checkbox-permissions-panel-example', standalone: true, imports: [ButtonComponent, CheckboxComponent, FormsModule, ReactiveFormsModule], template: `

Workspace permissions

Configure what project coordinators can do without editing each permission separately.

`, }) export class CheckboxPermissionsPanelExampleComponent { protected managementAccess = false; protected managementIndeterminate = true; protected readonly permissionsForm = new FormGroup({ projects: new FormControl(true, { nonNullable: true }), members: new FormControl(false, { nonNullable: true }), billing: new FormControl(true, { nonNullable: true }), }); protected toggleManagementGroup(): void { const nextValue = this.managementAccess; this.managementIndeterminate = false; this.permissionsForm.setValue({ projects: nextValue, members: nextValue, billing: nextValue, }); } protected syncManagementState(): void { const values = Object.values(this.permissionsForm.getRawValue()); const selectedCount = values.filter(Boolean).length; if (selectedCount === 0) { this.managementAccess = false; this.managementIndeterminate = false; return; } if (selectedCount === values.length) { this.managementAccess = true; this.managementIndeterminate = false; return; } this.managementAccess = false; this.managementIndeterminate = true; } } ``` ## Accessibility ### Accessible name The inner checkbox uses `ariaLabel` when provided and otherwise falls back to the visible `label`. If the visible label is hidden or omitted, provide an explicit accessible name. | Source | Accessible name | | --- | --- | | `ariaLabel` | explicit accessible name | | visible `label` | default fallback | | no label + no `ariaLabel` | avoid this state | ### Keyboard and state The control is backed by a native checkbox input, so it keeps the expected browser interaction model. | Key | Action | | --- | --- | | `Tab` | moves focus to or from the checkbox | | `Space` | toggles checked state when interactive | | State | Attribute | | --- | --- | | checked | native `checked` | | indeterminate | native mixed checkbox state | | disabled | native `disabled` | | required | native `required` | ### Descriptions, errors, and indeterminate Helper text and error text are wired into `aria-describedby` through the shared field wrapper. When an error is present, it becomes the active description and helper text is suppressed. Use `indeterminate` only for partially selected parent groups. It should communicate mixed child state, not act as a third standalone choice.