diff --git a/crates/zu/src/switch/mod.rs b/crates/zu/src/switch/mod.rs
index 20c92f2be..96854c75d 100644
--- a/crates/zu/src/switch/mod.rs
+++ b/crates/zu/src/switch/mod.rs
@@ -90,11 +90,12 @@ pub fn switch(props: &Props) -> Html {
                 aria_label={&props.aria_label}
                 classes={base_cls}
                 checked={props.checked}
+                checked_icon={icon.clone()}
                 default_checked={props.default_checked}
+                disabled={props.disabled}
                 input_classes={base_input_cls}
-                icon={icon.clone()}
+                icon={icon}
                 on_change={props.on_change.clone()}
-                checked_icon={icon}
                 variant={Variant::Switch}
                 >
             </SwitchBase>
diff --git a/crates/zu/src/switch/style.scss b/crates/zu/src/switch/style.scss
index 04b7244bc..acc38f097 100644
--- a/crates/zu/src/switch/style.scss
+++ b/crates/zu/src/switch/style.scss
@@ -162,11 +162,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-primary-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-primary-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {
@@ -187,11 +187,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-secondary-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-secondary-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {
@@ -212,11 +212,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-success-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-success-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {
@@ -237,11 +237,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-info-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-info-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {
@@ -262,11 +262,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-warning-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-warning-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {
@@ -287,11 +287,11 @@
           background-color: transparent;
         }
       }
-    }
 
-    &.ZuSwitchBase-disabled {
-      // TODO(Shaohua): call lighten() for light theme.
-      color: $zu-palette-error-main;
+      &.ZuSwitchBase-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-error-main;
+      }
     }
 
     &.ZuSwitchBase-checked + .ZuSwitch-track {