Select contain box overlaps label

[ziggy6792]

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 :)

[cliedeman]

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

[cliedeman]

Ok I see now. It depends on which Select variant you are using