labelPlacement of MUI FormControlLabel not working

Viewed 20

I'm using the FormControlLabel component from MUI and the label is always getting placed at the end, even if I set the labelPlacement prop to "start", "top" or "bottom".

This is my code:

              <FormControlLabel
                label="Connected account"
                labelPlacement="start"
                control={
                  <MDBox display="inline">
                    <MDTypography variant="caption" mr={2}>
                      Account Name
                    </MDTypography>
                    <MDButton
                      color="error"
                      size="small"
                      sx={{ m: "0.25rem" }}
                      onClick={() => disconnectAccount(idAccount)}
                    >
                      <MDTypography
                        fontSize="0.6rem"
                        color="white"
                        fontWeight="bold"
                        textTransform="uppercase"
                      >
                        Remove Account
                      </MDTypography>
                    </MDButton>
                  </MDBox>
                }
                sx={{
                  backgroundColor: "#f7fafc",
                  mb: "1rem",
                  borderRadius: "0.5rem",
                  pl: "1rem"
                }}
              />

This is what the UI looks like with labelPlacement set to "end" and "start", respectively, meaning a left margin is added when set to "start":

enter image description here enter image description here Am I missing something here?

0 Answers
Related