diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/checkbox/properties/checkbox-properties/checkbox-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/checkbox/properties/checkbox-properties/checkbox-properties.component.html
index 2c45f8a4c..9fb8650c0 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/checkbox/properties/checkbox-properties/checkbox-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/checkbox/properties/checkbox-properties/checkbox-properties.component.html
@@ -18,6 +18,13 @@
uncontrolled and the value will be managed internally by the component.
+
+ | defaultChecked: boolean |
+ false |
+
+ Initial state of the checkbox, only when it is uncontrolled.
+ |
+
| value: string |
|
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/checkbox-preview/checkbox-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/checkbox-preview/checkbox-preview.component.html
index e456308cd..5325bdd9d 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/checkbox-preview/checkbox-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/checkbox-preview/checkbox-preview.component.html
@@ -11,6 +11,16 @@
+
+
+
+
+
+
{
const dxcCheckbox = await render(DxcCheckboxComponent, {
componentProperties: {
label: "test-checkbox",
+ defaultChecked: true,
onChange: { emit: onClickFunction } as any,
},
imports: [MatCheckboxModule],
@@ -33,11 +34,11 @@ describe("DxcCheckbox tests", () => {
expect(dxcCheckbox);
const input = dxcCheckbox.getByRole("checkbox");
- expect(input.checked).toBeFalsy();
+ expect(input.checked).toBeTruthy();
const dxcInput = dxcCheckbox.getByText("test-checkbox");
fireEvent.click(dxcInput);
- expect(onClickFunction).toHaveBeenCalledWith(true);
- expect(input.checked).toBeTruthy();
+ expect(onClickFunction).toHaveBeenCalledWith(false);
+ expect(input.checked).toBeFalsy();
});
test("Controlled dxc-checkbox", async () => {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts
index af19cccb1..26697c491 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts
@@ -37,6 +37,12 @@ export class DxcCheckboxComponent implements OnInit {
}
private _checked;
+ /**
+ * Initial state of the checkbox, only when it is uncontrolled.
+ */
+ @Input()
+ defaultChecked: boolean = false;
+
/**
* Will be passed to the value attribute of the html input element. When inside a form,
* this value will be only submitted if the checkbox is checked.
@@ -125,6 +131,7 @@ export class DxcCheckboxComponent implements OnInit {
defaultInputs = new BehaviorSubject({
checked: false,
+ defaultChecked: false,
value: null,
label: null,
labelPosition: "before",
@@ -173,7 +180,7 @@ export class DxcCheckboxComponent implements OnInit {
}
ngOnInit() {
- this.renderedChecked = this.checked;
+ this.renderedChecked = this.checked || this.defaultChecked;
this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
if (this.disabled) {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.types.ts
index a8856e79e..c81801737 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.types.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.types.ts
@@ -16,6 +16,7 @@ export type Spacing = {
export interface CheckboxProperties {
checked?: boolean;
+ defaultChecked?: boolean;
value?: string;
label: string;
labelPosition?: "before" | "after";