diff --git a/src/design-system/components/checkbox/CheckBox.tsx b/src/design-system/components/checkbox/CheckBox.tsx
index 6008ae00b..b5b835d17 100644
--- a/src/design-system/components/checkbox/CheckBox.tsx
+++ b/src/design-system/components/checkbox/CheckBox.tsx
@@ -1,20 +1,26 @@
 import Checkbox, { CheckboxProps } from '@mui/material/Checkbox'
-import { FC, ReactNode, useState } from 'react'
+import { type ChangeEvent, type ReactNode, useCallback, useState } from 'react'
 import Loader from '~/components/loader/Loader'
 import { cn } from '~/utils/cn'
 
 import './CheckBox.scss'
 
-interface CheckBoxProps extends Omit<CheckboxProps, 'size'> {
+interface CheckBoxProps extends Omit<CheckboxProps, 'size' | 'onChange'> {
   variant: 'check' | 'middle'
   label: ReactNode
   labelPosition?: 'top' | 'bottom' | 'end'
   color?: 'primary' | 'secondary' | 'error' | 'success'
   size?: 'sm' | 'md' | 'lg'
   loading?: boolean
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
 }
 
-const CheckBox: FC<CheckBoxProps> = ({
+const CheckBox: React.FC<CheckBoxProps> = ({
+  checked: externalIsChecked,
+  defaultChecked = false,
+  onChange,
   color = 'primary',
   disabled = false,
   label,
@@ -24,11 +30,21 @@ const CheckBox: FC<CheckBoxProps> = ({
   size = 'md',
   ...props
 }) => {
-  const [checked, setChecked] = useState<boolean>(false)
+  const [internalIsChecked, setInternalIsChecked] =
+    useState<boolean>(defaultChecked)
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked)
-  }
+  const isCheckboxControlled = externalIsChecked !== undefined
+
+  const handleChange = useCallback(
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (!isCheckboxControlled) {
+        setInternalIsChecked(checked)
+      }
+
+      onChange?.(checked)
+    },
+    [onChange, isCheckboxControlled]
+  )
 
   const loaderSizeMapping: Record<string, number> = {
     sm: 14,
@@ -37,6 +53,9 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   const loader = <Loader size={loaderSizeMapping[size]} />
+  const resolvedIsCheck = isCheckboxControlled
+    ? externalIsChecked
+    : internalIsChecked
 
   return (
     <label
@@ -60,12 +79,12 @@ const CheckBox: FC<CheckBoxProps> = ({
       ) : (
         <Checkbox
           {...props}
-          checked={checked}
+          checked={resolvedIsCheck}
           className='s2s-checkbox__input'
           color={color}
           data-testid='checkbox-input'
           disabled={disabled || loading}
-          indeterminate={variant === 'middle' && checked}
+          indeterminate={variant === 'middle' && resolvedIsCheck}
           onChange={handleChange}
         />
       )}
diff --git a/src/design-system/stories/CheckBox.stories.tsx b/src/design-system/stories/CheckBox.stories.tsx
index 1be05002d..a1a876f75 100644
--- a/src/design-system/stories/CheckBox.stories.tsx
+++ b/src/design-system/stories/CheckBox.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
 import CheckBox from '~scss-components/checkbox/CheckBox'
 
 const meta: Meta<typeof CheckBox> = {
@@ -18,6 +19,10 @@ The \`CheckBox\` component is a highly customizable and user-friendly checkbox d
 - **Loading State:** When an action is in progress, the checkbox displays a spinner and becomes temporarily non-interactive, enhancing user feedback.
 - **Colors:** Use predefined color options like \`primary\`, \`secondary\`, \`success\`, or \`error\` to align the checkbox with your application's theme.
 
+#### Controlled vs. Uncontrolled States:
+- **Controlled Checkbox:** A checkbox is considered controlled when its state is managed by a parent component using the \`checked\` prop. In this case, the parent component controls the checked state, and the checkbox becomes a controlled component, meaning its state can be set externally.
+- **Uncontrolled Checkbox:** In contrast, when the \`checked\` prop is not provided, the checkbox is considered uncontrolled. It manages its own internal state and changes its state based on user interaction.
+
 
 This component is ideal for use in forms, settings pages, or any interface requiring intuitive selection controls. Whether you need a straightforward checkbox or a visually distinctive option with loading feedback, the \`CheckBox\` component adapts to your design and functionality needs.
             
@@ -61,6 +66,19 @@ This component is ideal for use in forms, settings pages, or any interface requi
     },
     label: {
       description: 'The content to be displayed as the label of the checkbox.'
+    },
+    checked: {
+      description:
+        'When provided, the checkbox becomes controlled. This value determines its checked state, overriding internal state management.',
+      control: 'boolean'
+    },
+    defaultChecked: {
+      description:
+        'Determines the initial checked state of the checkbox when the component is first rendered. It only applies when the checkbox is not controlled via the `checked` prop',
+      control: 'boolean'
+    },
+    onChange: {
+      description: 'Callback fired when the checkbox state changes.'
     }
   }
 }
@@ -86,6 +104,41 @@ export const Default: Story = {
   }
 }
 
+export const Controlled: Story = {
+  args: {
+    ...Default.args,
+    label: 'Controlled checkbox',
+    checked: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A checkbox controlled by the parent component using the `checked` prop. Changes to its state are managed internally unless the `checked` prop is externally set. In that case, it becomes a controlled component.'
+      }
+    }
+  },
+  render: (args) => {
+    const ControlledCheckBox = () => {
+      const [isChecked, setIsChecked] = useState(args.checked)
+
+      return (
+        <div>
+          <CheckBox
+            {...args}
+            checked={isChecked}
+            onChange={(checked) => {
+              setIsChecked(checked)
+            }}
+          />
+          <p>Checkbox is currently {isChecked ? 'checked' : 'unchecked'}</p>
+        </div>
+      )
+    }
+    return <ControlledCheckBox />
+  }
+}
+
 export const Disabled: Story = {
   args: {
     ...Default.args,