carbon-components-angular 5.67.0 → 5.68.0

package/fesm2015/carbon-components-angular-toggle.mjs

@@ -1,6 +1,6 @@
-import { Checkbox } from 'carbon-components-angular/checkbox';
+import { Checkbox, CHECKBOX_GROUP_HOST } from 'carbon-components-angular/checkbox';
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, Input, HostBinding, NgModule } from '@angular/core';
+import { TemplateRef, Component, Optional, Inject, Input, HostBinding, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'carbon-components-angular/i18n';
 import { I18nModule } from 'carbon-components-angular/i18n';
@@ -39,8 +39,8 @@ class Toggle extends Checkbox {
     /**
      * Creates an instance of Toggle.
      */
-    constructor(changeDetectorRef, i18n) {
-        super(changeDetectorRef);
+    constructor(changeDetectorRef, hostGroup, i18n) {
+        super(changeDetectorRef, hostGroup);
         this.changeDetectorRef = changeDetectorRef;
         this.i18n = i18n;
         /**
@@ -122,7 +122,7 @@ class Toggle extends Checkbox {
  * Variable used for creating unique ids for toggle components.
  */
 Toggle.toggleCount = 0;
-Toggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
+Toggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggle, deps: [{ token: i0.ChangeDetectorRef }, { token: CHECKBOX_GROUP_HOST, optional: true }, { token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
 Toggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toggle, selector: "cds-toggle, ibm-toggle", inputs: { offText: "offText", onText: "onText", label: "label", size: "size", hideLabel: "hideLabel", ariaLabel: "ariaLabel", skeleton: "skeleton" }, host: { properties: { "class.cds--toggle--skeleton": "this.skeleton", "class.cds--toggle": "this.toggleClass", "class.cds--toggle--disabled": "this.disabledClass", "class.cds--form-item": "this.formItem" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -247,7 +247,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.I18n }]; }, propDecorators: { offText: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [CHECKBOX_GROUP_HOST]
+                    }] }, { type: i1.I18n }];
+    }, propDecorators: { offText: [{
                 type: Input
             }], onText: [{
                 type: Input

package/fesm2015/carbon-components-angular-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"carbon-components-angular-toggle.mjs","sources":["../../src/toggle/toggle.component.ts","../../src/toggle/toggle.module.ts","../../src/toggle/carbon-components-angular-toggle.ts"],"sourcesContent":["import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * @deprecated since v5 - Use boolean\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n */\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set `aria-label` property for the button when label is empty\n\t */\n\t@Input() ariaLabel: string;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n","// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { Toggle } from \"./toggle.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tToggle\n\t],\n\texports: [\n\t\tToggle\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tI18nModule\n\t]\n})\nexport class ToggleModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"carbon-components-angular-toggle.mjs","sources":["../../src/toggle/toggle.component.ts","../../src/toggle/toggle.module.ts","../../src/toggle/carbon-components-angular-toggle.ts"],"sourcesContent":["import { Checkbox, CHECKBOX_GROUP_HOST, CheckboxGroupHost } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInject,\n\tInput,\n\tOptional,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * @deprecated since v5 - Use boolean\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n */\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set `aria-label` property for the button when label is empty\n\t */\n\t@Input() ariaLabel: string;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(\n\t\tprotected changeDetectorRef: ChangeDetectorRef,\n\t\t@Optional() @Inject(CHECKBOX_GROUP_HOST) hostGroup: CheckboxGroupHost | null,\n\t\tprotected i18n: I18n\n\t) {\n\t\tsuper(changeDetectorRef, hostGroup);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n","// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { Toggle } from \"./toggle.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tToggle\n\t],\n\texports: [\n\t\tToggle\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tI18nModule\n\t]\n})\nexport class ToggleModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/carbon-components-angular-checkbox.mjs

@@ -1,8 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild, HostListener, HostBinding, ContentChildren, forwardRef, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i2 from 'carbon-components-angular/icon';
+import { IconModule } from 'carbon-components-angular/icon';
+
+const CHECKBOX_GROUP_HOST = new InjectionToken("CheckboxGroupHost");
 
 /**
  * Defines the set of states for a checkbox component.
@@ -27,8 +31,9 @@ class Checkbox {
     /**
      * Creates an instance of `Checkbox`.
      */
-    constructor(changeDetectorRef) {
+    constructor(changeDetectorRef, hostGroup) {
         this.changeDetectorRef = changeDetectorRef;
+        this.hostGroup = hostGroup;
         /**
          * Set to `true` for a disabled checkbox.
          */
@@ -45,6 +50,10 @@ class Checkbox {
          * The unique id for the checkbox component.
          */
         this.id = `checkbox-${Checkbox.checkboxCount}`;
+        /**
+         * Optional title for the `<label>` element.
+         */
+        this.title = "";
         /**
          * Emits click event.
          */
@@ -72,6 +81,7 @@ class Checkbox {
          * Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.
          */
         this.currentCheckboxState = CheckboxState.Init;
+        this.helperId = `checkbox-helper-${Checkbox.helperIdCounter++}`;
         /**
          * Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
          */
@@ -124,10 +134,28 @@ class Checkbox {
     get checked() {
         return this._checked;
     }
+    get effectiveReadOnly() {
+        const own = this.readOnly;
+        const group = this.hostGroup?.readOnly ?? false;
+        return !!(own !== undefined ? own : group);
+    }
+    get effectiveInvalid() {
+        const own = this.invalid;
+        const group = this.hostGroup?.invalid ?? false;
+        return !!(own !== undefined ? own : group);
+    }
+    get effectiveWarn() {
+        const own = this.warn;
+        const group = this.hostGroup?.warn ?? false;
+        return !!(own !== undefined ? own : group);
+    }
     /**
      * Toggle the selected state of the checkbox.
      */
     toggle() {
+        if (this.effectiveReadOnly) {
+            return;
+        }
         // Flip checked and reset indeterminate
         this.setChecked(!this.checked, true);
     }
@@ -166,6 +194,13 @@ class Checkbox {
         this.disabled = isDisabled;
         this.changeDetectorRef.markForCheck();
     }
+    /**
+     * Invoked by `CheckboxGroup` when group `readOnly`, `invalid`, `warn` change so `OnPush`
+     * checkboxes still refresh inherited state from `CHECKBOX_GROUP_HOST`.
+     */
+    markForCheckFromGroup() {
+        this.changeDetectorRef.markForCheck();
+    }
     focusOut() {
         this.onTouched();
     }
@@ -179,6 +214,13 @@ class Checkbox {
      * Handles click events on the `Checkbox` and emits changes to other classes.
      */
     onClick(event) {
+        if (this.effectiveReadOnly) {
+            event.preventDefault();
+            if (this.click.observers.length) {
+                this.click.emit();
+            }
+            return;
+        }
         if (this.click.observers.length) {
             // Disable default checkbox activation behavior which flips checked and resets indeterminate.
             // This allows the parent component to control the checked/indeterminate properties.
@@ -213,6 +255,12 @@ class Checkbox {
             this.inputCheckbox.nativeElement.indeterminate = true;
         }
     }
+    /**
+     * Returns `true` when the provided value is a `TemplateRef`.
+     */
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
     /**
      * Sets checked state and optionally resets indeterminate state.
      */
@@ -235,15 +283,22 @@ class Checkbox {
  * Variable used for creating unique ids for checkbox components.
  */
 Checkbox.checkboxCount = 0;
-Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: { disabled: "disabled", skeleton: "skeleton", hideLabel: "hideLabel", name: "name", id: "id", required: "required", value: "value", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", indeterminate: "indeterminate", checked: "checked" }, outputs: { click: "click", checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+Checkbox.helperIdCounter = 0;
+Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }, { token: CHECKBOX_GROUP_HOST, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: { disabled: "disabled", skeleton: "skeleton", hideLabel: "hideLabel", name: "name", id: "id", required: "required", value: "value", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", title: "title", helperText: "helperText", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", readOnly: "readOnly", decorator: "decorator", indeterminate: "indeterminate", checked: "checked" }, outputs: { click: "click", checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: Checkbox,
             multi: true
         }
     ], viewQueries: [{ propertyName: "inputCheckbox", first: true, predicate: ["inputCheckbox"], descendants: true }], ngImport: i0, template: `
-		<div class="cds--form-item cds--checkbox-wrapper">
+		<div class="cds--form-item cds--checkbox-wrapper"
+			[ngClass]="{
+				'cds--checkbox-wrapper--invalid': !effectiveReadOnly && effectiveInvalid,
+				'cds--checkbox-wrapper--warning': !effectiveReadOnly && !effectiveInvalid && effectiveWarn,
+				'cds--checkbox-wrapper--readonly': effectiveReadOnly,
+				'cds--checkbox-wrapper--decorator': !!decorator
+			}">
 			<input
 				#inputCheckbox
 				class="cds--checkbox"
@@ -254,28 +309,74 @@ Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 				[required]="required"
 				[checked]="checked"
 				[disabled]="disabled"
+				[attr.data-invalid]="(!effectiveReadOnly && effectiveInvalid) ? true : null"
+				[attr.aria-readonly]="effectiveReadOnly ? true : null"
 				[attr.aria-labelledby]="ariaLabelledby"
+				[attr.aria-describedby]="(helperText && !effectiveInvalid && !effectiveWarn) ? helperId : null"
 				(change)="onChange($event)"
 				(click)="onClick($event)">
 			<label
 				[for]="id + '_input'"
 				[attr.aria-label]="ariaLabel"
+				[attr.title]="title || null"
 				class="cds--checkbox-label"
 				[ngClass]="{
 					'cds--skeleton' : skeleton
 				}">
 				<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
 					<ng-content></ng-content>
+					<ng-container *ngIf="decorator">
+						<div class="cds--checkbox-wrapper-inner--decorator">
+							<ng-template [ngTemplateOutlet]="decorator"></ng-template>
+						</div>
+					</ng-container>
 				</span>
 			</label>
+			<div class="cds--checkbox__validation-msg">
+				<ng-container *ngIf="!effectiveReadOnly && effectiveInvalid">
+					<svg
+						cdsIcon="warning--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="$any(invalidText)"></ng-template>
+					</div>
+				</ng-container>
+				<ng-container *ngIf="!effectiveReadOnly && !effectiveInvalid && effectiveWarn">
+					<svg
+						cdsIcon="warning--alt--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="$any(warnText)"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<div
+				*ngIf="helperText && !effectiveInvalid && !effectiveWarn"
+				class="cds--form__helper-text"
+				[id]="helperId">
+				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="$any(helperText)"></ng-template>
+			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
             args: [{
                     selector: "cds-checkbox, ibm-checkbox",
                     template: `
-		<div class="cds--form-item cds--checkbox-wrapper">
+		<div class="cds--form-item cds--checkbox-wrapper"
+			[ngClass]="{
+				'cds--checkbox-wrapper--invalid': !effectiveReadOnly && effectiveInvalid,
+				'cds--checkbox-wrapper--warning': !effectiveReadOnly && !effectiveInvalid && effectiveWarn,
+				'cds--checkbox-wrapper--readonly': effectiveReadOnly,
+				'cds--checkbox-wrapper--decorator': !!decorator
+			}">
 			<input
 				#inputCheckbox
 				class="cds--checkbox"
@@ -286,20 +387,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 				[required]="required"
 				[checked]="checked"
 				[disabled]="disabled"
+				[attr.data-invalid]="(!effectiveReadOnly && effectiveInvalid) ? true : null"
+				[attr.aria-readonly]="effectiveReadOnly ? true : null"
 				[attr.aria-labelledby]="ariaLabelledby"
+				[attr.aria-describedby]="(helperText && !effectiveInvalid && !effectiveWarn) ? helperId : null"
 				(change)="onChange($event)"
 				(click)="onClick($event)">
 			<label
 				[for]="id + '_input'"
 				[attr.aria-label]="ariaLabel"
+				[attr.title]="title || null"
 				class="cds--checkbox-label"
 				[ngClass]="{
 					'cds--skeleton' : skeleton
 				}">
 				<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
 					<ng-content></ng-content>
+					<ng-container *ngIf="decorator">
+						<div class="cds--checkbox-wrapper-inner--decorator">
+							<ng-template [ngTemplateOutlet]="decorator"></ng-template>
+						</div>
+					</ng-container>
 				</span>
 			</label>
+			<div class="cds--checkbox__validation-msg">
+				<ng-container *ngIf="!effectiveReadOnly && effectiveInvalid">
+					<svg
+						cdsIcon="warning--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="$any(invalidText)"></ng-template>
+					</div>
+				</ng-container>
+				<ng-container *ngIf="!effectiveReadOnly && !effectiveInvalid && effectiveWarn">
+					<svg
+						cdsIcon="warning--alt--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="$any(warnText)"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<div
+				*ngIf="helperText && !effectiveInvalid && !effectiveWarn"
+				class="cds--form__helper-text"
+				[id]="helperId">
+				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="$any(helperText)"></ng-template>
+			</div>
 		</div>
 	`,
                     providers: [
@@ -311,7 +452,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CHECKBOX_GROUP_HOST]
+                }] }]; }, propDecorators: { disabled: [{
                 type: Input
             }], skeleton: [{
                 type: Input
@@ -329,6 +475,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], ariaLabelledby: [{
                 type: Input
+            }], title: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidText: [{
+                type: Input
+            }], warn: [{
+                type: Input
+            }], warnText: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], decorator: [{
+                type: Input
             }], indeterminate: [{
                 type: Input
             }], checked: [{
@@ -347,26 +509,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["focusout"]
             }] } });
 
+/**
+ * Groups related checkboxes with a shared legend, validation, and optional decorator
+ * (e.g. AI label).
+ *
+ * ```html
+ * <cds-checkbox-group legend="Group label" [decorator]="decoratorTpl">
+ *   <cds-checkbox>Option 1</cds-checkbox>
+ * </cds-checkbox-group>
+ * ```
+ */
+class CheckboxGroup {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.hostFormItem = true;
+        this.helperTextId = `checkbox-group-helper-${CheckboxGroup.nextHelperId++}`;
+        this.orientation = "vertical";
+        this.invalid = false;
+        this.warn = false;
+        this.readOnly = false;
+    }
+    ngOnChanges(changes) {
+        if (changes["readOnly"] || changes["invalid"] || changes["warn"]) {
+            this.notifyCheckboxesHostStateChanged();
+        }
+    }
+    ngAfterContentInit() {
+        this.checkboxes.changes.subscribe(() => this.notifyCheckboxesHostStateChanged());
+    }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    notifyCheckboxesHostStateChanged() {
+        Promise.resolve().then(() => {
+            this.checkboxes?.forEach((cb) => cb.markForCheckFromGroup());
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+}
+CheckboxGroup.nextHelperId = 0;
+CheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxGroup, selector: "cds-checkbox-group, ibm-checkbox-group", inputs: { legend: "legend", legendId: "legendId", fieldsetAriaLabelledby: "fieldsetAriaLabelledby", orientation: "orientation", helperText: "helperText", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", readOnly: "readOnly", decorator: "decorator" }, host: { properties: { "class.cds--form-item": "this.hostFormItem" } }, providers: [
+        { provide: CHECKBOX_GROUP_HOST, useExisting: CheckboxGroup }
+    ], queries: [{ propertyName: "checkboxes", predicate: i0.forwardRef(function () { return Checkbox; }), descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+		<fieldset
+			class="cds--checkbox-group"
+			[ngClass]="{
+				'cds--checkbox-group--horizontal': orientation === 'horizontal',
+				'cds--checkbox-group--readonly': readOnly,
+				'cds--checkbox-group--invalid': !readOnly && invalid,
+				'cds--checkbox-group--warning': !readOnly && !invalid && warn,
+				'cds--checkbox-group--decorator': !!decorator
+			}"
+			[attr.data-invalid]="invalid ? true : null"
+			[attr.aria-labelledby]="legendId || fieldsetAriaLabelledby || null"
+			[attr.aria-readonly]="readOnly ? true : null"
+			[attr.aria-describedby]="(helperText && !invalid && !warn) ? helperTextId : null">
+			<legend *ngIf="legend" class="cds--label" [attr.id]="legendId || null">
+				<ng-template *ngIf="isTemplate(legend); else legendLabel" [ngTemplateOutlet]="legend"></ng-template>
+				<ng-template #legendLabel>{{legend}}</ng-template>
+				<ng-container *ngIf="decorator">
+					<div class="cds--checkbox-group-inner--decorator">
+						<ng-template [ngTemplateOutlet]="decorator"></ng-template>
+					</div>
+				</ng-container>
+			</legend>
+			<ng-content></ng-content>
+			<div class="cds--checkbox-group__validation-msg">
+				<ng-container *ngIf="!readOnly && invalid">
+					<svg
+						cdsIcon="warning--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+				</ng-container>
+				<ng-container *ngIf="!readOnly && !invalid && warn">
+					<svg
+						cdsIcon="warning--alt--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<div
+				*ngIf="helperText && !invalid && !warn"
+				class="cds--form__helper-text"
+				[id]="helperTextId">
+				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+			</div>
+		</fieldset>
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "cds-checkbox-group, ibm-checkbox-group",
+                    template: `
+		<fieldset
+			class="cds--checkbox-group"
+			[ngClass]="{
+				'cds--checkbox-group--horizontal': orientation === 'horizontal',
+				'cds--checkbox-group--readonly': readOnly,
+				'cds--checkbox-group--invalid': !readOnly && invalid,
+				'cds--checkbox-group--warning': !readOnly && !invalid && warn,
+				'cds--checkbox-group--decorator': !!decorator
+			}"
+			[attr.data-invalid]="invalid ? true : null"
+			[attr.aria-labelledby]="legendId || fieldsetAriaLabelledby || null"
+			[attr.aria-readonly]="readOnly ? true : null"
+			[attr.aria-describedby]="(helperText && !invalid && !warn) ? helperTextId : null">
+			<legend *ngIf="legend" class="cds--label" [attr.id]="legendId || null">
+				<ng-template *ngIf="isTemplate(legend); else legendLabel" [ngTemplateOutlet]="legend"></ng-template>
+				<ng-template #legendLabel>{{legend}}</ng-template>
+				<ng-container *ngIf="decorator">
+					<div class="cds--checkbox-group-inner--decorator">
+						<ng-template [ngTemplateOutlet]="decorator"></ng-template>
+					</div>
+				</ng-container>
+			</legend>
+			<ng-content></ng-content>
+			<div class="cds--checkbox-group__validation-msg">
+				<ng-container *ngIf="!readOnly && invalid">
+					<svg
+						cdsIcon="warning--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+				</ng-container>
+				<ng-container *ngIf="!readOnly && !invalid && warn">
+					<svg
+						cdsIcon="warning--alt--filled"
+						size="16"
+						class="cds--checkbox__invalid-icon cds--checkbox__invalid-icon--warning">
+					</svg>
+					<div class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<div
+				*ngIf="helperText && !invalid && !warn"
+				class="cds--form__helper-text"
+				[id]="helperTextId">
+				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+			</div>
+		</fieldset>
+	`,
+                    providers: [
+                        { provide: CHECKBOX_GROUP_HOST, useExisting: CheckboxGroup }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hostFormItem: [{
+                type: HostBinding,
+                args: ["class.cds--form-item"]
+            }], checkboxes: [{
+                type: ContentChildren,
+                args: [forwardRef(() => Checkbox), { descendants: true }]
+            }], legend: [{
+                type: Input
+            }], legendId: [{
+                type: Input
+            }], fieldsetAriaLabelledby: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidText: [{
+                type: Input
+            }], warn: [{
+                type: Input
+            }], warnText: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], decorator: [{
+                type: Input
+            }] } });
+
 // modules
 class CheckboxModule {
 }
 CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, declarations: [Checkbox], imports: [CommonModule,
-        FormsModule], exports: [Checkbox] });
+CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, declarations: [Checkbox,
+        CheckboxGroup], imports: [CommonModule,
+        FormsModule,
+        IconModule], exports: [Checkbox,
+        CheckboxGroup] });
 CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, imports: [CommonModule,
-        FormsModule] });
+        FormsModule,
+        IconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        Checkbox
+                        Checkbox,
+                        CheckboxGroup
                     ],
                     exports: [
-                        Checkbox
+                        Checkbox,
+                        CheckboxGroup
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule
+                        FormsModule,
+                        IconModule
                     ]
                 }]
         }] });
@@ -375,5 +739,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, CheckboxModule, CheckboxState };
+export { CHECKBOX_GROUP_HOST, Checkbox, CheckboxGroup, CheckboxModule, CheckboxState };
 //# sourceMappingURL=carbon-components-angular-checkbox.mjs.map