diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index fd326a0b1d..cceb217b28 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
export const Checkbox = function Checkbox({ height, properties, styles, fireEvent, setExposedVariable }) {
- const [checked, setChecked] = React.useState(false);
+ const defaultValueFromProperties = properties.defaultValue ?? false;
+ const [defaultValue, setDefaultvalue] = React.useState(defaultValueFromProperties);
+ const [checked, setChecked] = React.useState(defaultValueFromProperties);
const { label } = properties;
const { visibility, disabledState, checkboxColor, textColor } = styles;
@@ -15,6 +17,12 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
fireEvent('onUnCheck');
}
}
+ useEffect(() => {
+ setExposedVariable('value', defaultValueFromProperties);
+ setDefaultvalue(defaultValueFromProperties);
+ setChecked(defaultValueFromProperties);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [defaultValueFromProperties]);
return (
@@ -26,6 +34,8 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
onClick={(e) => {
toggleValue(e);
}}
+ defaultChecked={defaultValue}
+ checked={checked}
style={{ backgroundColor: checked ? `${checkboxColor}` : 'white', marginTop: '1px' }}
/>
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index ba171f2aee..e05721c913 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -552,6 +552,7 @@ export const widgets = [
},
properties: {
label: { type: 'code', displayName: 'Label' },
+ defaultValue: { type: 'toggle', displayName: 'Default Status' },
},
events: {
onCheck: { displayName: 'On check' },
@@ -563,7 +564,9 @@ export const widgets = [
visibility: { type: 'toggle', displayName: 'Visibility' },
disabledState: { type: 'toggle', displayName: 'Disable' },
},
- exposedVariables: {},
+ exposedVariables: {
+ value: false,
+ },
definition: {
others: {
showOnDesktop: { value: '{{true}}' },
@@ -571,6 +574,7 @@ export const widgets = [
},
properties: {
label: { value: 'Checkbox label' },
+ defaultValue: { value: '{{false}}' },
},
events: [],
styles: {