[Radio] Handle the disabled state better

mnajdova · Sep 3, 2024 · 064907e · 064907e
1 parent 715942d
commit 064907e
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -51,7 +51,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     variants: [
       {
-        props: { color: 'default', disableRipple: false },
+        props: { color: 'default', disabled: false, disableRipple: false },
         style: {
           '&:hover': {
             backgroundColor: theme.vars
@@ -63,7 +63,7 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color, disableRipple: false },
+          props: { color, disabled: false, disableRipple: false },
           style: {
             '&:hover': {
               backgroundColor: theme.vars
@@ -75,7 +75,7 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color },
+          props: { color, disabled: false },
           style: {
             [`&.${radioClasses.checked}`]: {
               color: (theme.vars || theme).palette[color].main,
@@ -121,11 +121,13 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled = false,
     disableRipple = false,
     ...other
   } = props;
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size,
@@ -154,6 +156,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       checkedIcon={React.cloneElement(checkedIcon, {
         fontSize: defaultCheckedIcon.props.fontSize ?? size,
       })}
+      disabled={disabled}
       ownerState={ownerState}
       classes={classes}
       name={name}