[TextField] `OutlinedInput` border overlaps with the label

[theMyth721]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

<OutlinedInput /> Doesn't work properly with labels.

The label overlaps, but works fine with <TextField />

I want to use OutlinedInput as there seems to be greater flexibility, but I may not have a choice until this is fixed

See code and screenshots below:

import React from 'react'
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { useForm } from 'react-hook-form';

/** 
 * First I install all dependencies:
 * These are the components that wrap a text input:
 */
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
import FormHelperText from '@mui/material/FormHelperText';

import TextField from '@mui/material/TextField';

import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Checkbox from '@mui/material/Checkbox';

/** The Button we will use for Submitting the form */
import Button  from '@mui/material/Button';



/**
 * 
 * @returns <FormValidation />
 */
export default function FormValidation() {

  /**
   * Get the three most important porops from useForm, also getting watch in case I want to compare passwords for example
   */
  const {register, handleSubmit, formState, watch} = useForm();

  return (
    <Box component='section' sx={{}}>
        <Typography variant='h4'>Form Validation with MUI</Typography>
        <Typography variant='body1'>
            There is no built in Form Validation in MUI so I will now try to integrate with React Hook Form,
            This same component will also be with Forms
            We are going to use almost the same form from the react hook form example.
            Here we use First, Last name for text, email, number, 
        </Typography>
        <Box sx={{my: 5}}>
            <form onSubmit={handleSubmit((data) => {
              console.log('Using React Hook Form with MUI Controls!', data);
            })}>

              <FormControl fullWidth>
                <InputLabel>First name:</InputLabel>
                <OutlinedInput />
                <FormHelperText></FormHelperText>
              </FormControl>
              {/* Text field is good but limited, for now we work with OutlinedInput, but it has the OutlinedInput bug */}
              <TextField 
                error={false}
                fullWidth
                variant='outlined'
                name='firstName'
                label='First Name'
                color='success'
                InputLabelProps={{sx: {}}}
              />
              

            </form>
        </Box>
    </Box>
  )
}

See screenshots below:

With OutlinedInput:

With TextField:

Expected behavior 🤔

They should both look the same and the border should not overlap the label text on focus.

Steps to reproduce 🕹

Steps:

1. Just test an <OutlinedInput /> basic element with a InputLabel and see the result2.

Im dont know why but with CodeSandbox Im not getting to see the file for the <Demo /> component and somehow I can't save a sandbox properly but you should be able to test it very easily by simply creating the component

Context 🔦

Learning MUI

Your environment 🌎

`npx @mui/envinfo`

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

[danilo-leal]

Hey @theMyth721, thanks for opening up the issue! You might need to add the same label as a label prop to the OutlinedInput component so the visuals are correct. Check this example out and let me know if it solves your problem.

[theMyth721]

Hey, Thank you for this. Sorry about the delay, I will try it today or tomorrow and get back to you

[MahmoudMans]

@theMyth721 I tried the code that @danilo-leal propose and it worked correctly.

[theMyth721]

Didn't work for me. When I put the label prop inside the element, it just creates a gap in the border.

[danilo-leal]

@theMyth721 could you share an updated CodeSandbox?

[theMyth721]

Yes sure, I have my dissertation due on the 29th, I will send it straight after :)

[markatworksphere]

@danilo-leal It appears this may be a regression. We've noticed it works correctly for us on 5.7.0 but not recent versions.

[alexandrudanpop]

Any update on this issue?

[GeorgeFlorian]

I have also encountered this bug when using a conditionally rendered Select:

      {/* Year Select */}
      {exportOption && exportOption.includes('all') && (
        <FormControl className="w-1/3 min-w-28">
          <InputLabel id="year-label" size="small">
            Year
          </InputLabel>
          <Select
            id="year"
            labelId="year-label"
            size="small"
            value={year}
            onChange={handleYearChange}
          >
            {yearOptions.map((option) => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      )}

I've tried adding keys to every element but the label still overlaps with the border.