Select contain box overlaps label
ziggy6792 opened this issue · comments
Current Behavior 😯
In your Code Sandbox demo https://codesandbox.io/s/915qlr56rp the "tags" select field contain box overlaps the label. I now have the same issue in my app and I am not sure how to fix it. It seems like the label it not properly 'linked' to the select field.
Expected Behavior 🤔
Label should not intercept. Should look more like this.
Steps to Reproduce 🕹
Please see your Code Sandbox
Thanks a lot :)
Hi @ziggy6792
I got the expected behaviour with
<FormControl sx={{m: 1, minWidth: 120}}>
<Field
component={Select}
type="text"
label="Tags"
name="tags"
multiple={true}
>
<MenuItem value="dogs">Dogs</MenuItem>
<MenuItem value="cats">Cats</MenuItem>
<MenuItem value="rats">Rats</MenuItem>
<MenuItem value="snakes">Snakes</MenuItem>
</Field>
</FormControl>
But this does not align with the docs.
https://mui.com/material-ui/react-select/#labels-and-helper-text
Not sure why the docs recommend an InputLabel
when Select has a label prop
Ok I see now. It depends on which Select variant you are using