FormHelperText length affect control hitbox

[sampain]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/react-checkbox/#formgroup
2. Write a long text in the FormHelperText.
3. Hitbox is now larger than it should be.

Current behavior

Hitbox gets larger, following the FormHelperText length.

It's more noticeable whithout label where we see the hitbox is as large as the helpertext. The checkbox also get centered.

Expected behavior

Checkbox hitbox should be unaffected by the FormHelperText.

I tested the checkbox, but I suppose other controls are also affected.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: FormHelperText control hitbox

[siriwatknp]

Hey, I cannot reproduce this.

Write a long text in the FormHelperText

I got this:

[sampain]

When the label is there, there isn’t any issue visually. However, the hitbox gets nearly as large as the helpertext. Meaning that you can click in the empty space at the right of the label and it’ll check the checkbox.

[ZeeshanTamboli]

@sampain You can limit the click area by using width: 'fit-content' on FormGroup: https://stackblitz.com/edit/dvdzx1fz?file=src%2FDemo.tsx

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.