[TextField] `OutlinedInput` border overlaps with the label

Duplicates

• I have searched the existing issues

Latest version

• 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.

[MahmoudMans]

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

[theMyth721]

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