diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
index 61e2be11..60488bd8 100644
--- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
@@ -27,11 +27,6 @@
 		}
 	}
 
-	&.disabled {
-		opacity: var(--opacity-disabled, 0.3);
-		cursor: not-allowed;
-	}
-
 	input[type="checkbox"] {
 		accent-color: var(--select-option-selected-default-background);
 		cursor: pointer;
@@ -56,10 +51,12 @@
 			border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
 			accent-color: var(--select-option-selected-pressed-background);
 		}
+	}
 
-		&:disabled {
-			cursor: not-allowed;
-		}
+	&.disabled {
+		pointer-events: none;
+		cursor: not-allowed;
+		opacity: var(--opacity-disabled, 0.3);
 	}
 
 	// input[type="checkbox"]::before {
diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx
index e8d7f6c6..4ee3c5ba 100644
--- a/src/front/Components/DesignSystem/CheckBox/index.tsx
+++ b/src/front/Components/DesignSystem/CheckBox/index.tsx
@@ -45,7 +45,6 @@ export default class CheckBox extends React.Component<IProps, IState> {
 						value={this.props.option.value as string}
 						onChange={this.onChange}
 						checked={this.state.checked}
-						disabled={this.props.disabled}
 					/>
 					<div className={classes["content"]}>
 						{this.props.option.label && (
diff --git a/src/front/Components/DesignSystem/RadioBox/classes.module.scss b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
index f4e03727..ffa80c55 100644
--- a/src/front/Components/DesignSystem/RadioBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
@@ -28,10 +28,6 @@
 		}
 	}
 
-	&.disabled {
-		opacity: var(--opacity-disabled, 0.3);
-	}
-
 	input[type="radio"] {
 		cursor: pointer;
 		width: 20px;
@@ -60,6 +56,12 @@
 		}
 	}
 
+	&.disabled {
+		pointer-events: none;
+		cursor: not-allowed;
+		opacity: var(--opacity-disabled, 0.3);
+	}
+
 	// input[type="radio"]::before {
 	// 	content: "";
 	// 	width: 11px;
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index dc6bba53..45580233 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/src/front/Components/DesignSystem/RadioBox/index.tsx
@@ -32,7 +32,6 @@ export default class RadioBox extends React.Component<IProps> {
 						defaultChecked={this.props.defaultChecked}
 						onChange={this.props.onChange}
 						value={this.props.value}
-						disabled={this.props.disabled}
 					/>
 					<div className={classes["content"]}>
 						{this.props.label && (
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 6c7ea158..0eab5b90 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -114,6 +114,16 @@ export default function DesignSystem() {
 						toolTip="test"
 						disabled={true}
 					/>
+					<CheckboxesInputElement
+						option={{
+							label: "Checked & Disabled",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+						checked={true}
+						disabled={true}
+					/>
 				</div>
 
 				<div className={classes["rows"]}>
@@ -134,6 +144,15 @@ export default function DesignSystem() {
 						toolTip="test"
 						disabled={true}
 					/>
+					<RadioBox
+						name="document"
+						value={"new client"}
+						description="Test"
+						label="Créer un document"
+						toolTip="test"
+						checked={true}
+						disabled={true}
+					/>
 				</div>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>