FormControlLabel with Box - justifyContent: 'space-between' not working with width: '100%'

[abdulshaikh55]

Steps to reproduce

Open this link to live example: stackblitz

Current behavior

When using a Box component inside a FormControlLabel's label prop, setting width: 100% and justifyContent: 'space-between' doesn't properly apply the space-between styling. The elements don't spread across the full width as expected

Expected behavior

When setting width: '100%' on the Box component (instead of a fixed width of 300) and justifyContent: 'space-between' , the content should spread across the full width of the FormControlLabel, with the first Typography aligned to the left and the second Typography (PRO badge) aligned to the right.

I've tried using a fixed width which works better, but ideally, I'd like to use a responsive percentage width. I suspect there might be an issue with how FormControlLabel handles the width of its label content.

Context

This issue appears to be specific to the FormControlLabel component, as the same Box configuration works correctly in other contexts outside of FormControlLabel.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    react:  19.1.0
    react-dom:  19.1.0

Browser used: Zen

Search keywords: FormControl Box sx

[ZeeshanTamboli]

Here's how you can do it: https://stackblitz.com/edit/github-vfw4okpj-rdeqbqs8.

By default, FormControlLabel wraps the label in a <Typography> component, which renders as a <span>. So if you use a Box (a <div>) as the label, it ends up inside a <span>, which is invalid HTML. That’s also why width: 100% on the Box doesn’t work.

To fix this, use the disableTypography prop to render your custom label directly, without the wrapping <span>. This way, you don’t need to set width: 100% on the Box or RadioGroup.

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.