[FormControlLabel] Fix misplaced asterisk when labelPlacement is pr…

…ovided (#37831)
mui · Jul 12, 2023 · 73dd1e1 · 73dd1e1
1 parent f950ebf
commit 73dd1e1
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useFormControl } from '../FormControl';
+import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
@@ -164,11 +165,15 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref
       {...other}
     >
       {React.cloneElement(control, controlProps)}
-      {label}
-      {required && (
-        <AsteriskComponent ownerState={ownerState} aria-hidden className={classes.asterisk}>
-          &thinsp;{'*'}
-        </AsteriskComponent>
+      {required ? (
+        <Stack direction="row" alignItems="center">
+          {label}
+          <AsteriskComponent ownerState={ownerState} aria-hidden className={classes.asterisk}>
+            &thinsp;{'*'}
+          </AsteriskComponent>
+        </Stack>
+      ) : (
+        label
       )}
     </FormControlLabelRoot>
   );