diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
index c003797e40..7411626340 100644
--- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
+++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx
@@ -65,7 +65,7 @@ const checkbox = tv({
 })
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
-  ({ checked, mixed, error, onChange, className, children, ...props }, ref) => {
+  ({ checked, mixed, error, onChange, className, children, disabled, ...props }, ref) => {
     const styles = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
 
@@ -97,18 +97,19 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span data-disabled={props.disabled?.toString()} className={styles.wrapper}>
+      <span data-disabled={disabled?.toString()} className={styles.wrapper}>
         <span className={styles.innerWrapper}>
           <input
             {...props}
-            data-smarthr-ui-input="true"
+            ref={inputRef}
             type="checkbox"
             id={checkBoxId}
             checked={checked}
+            disabled={disabled}
             onChange={onChange}
-            className={styles.input}
-            ref={inputRef}
             aria-invalid={error || undefined}
+            className={styles.input}
+            data-smarthr-ui-input="true"
           />
           <AriaHiddenBox className={styles.box} />
           <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />