Material UI OutlinedInput and InputLabel overlap

Question

How can I solve the overlap issue in InputLabel and OutlinedInput in Material UI?

<FormControl>
    <InputLabel htmlFor="my-input">Email address</InputLabel>
    <OutlinedInput id="my-input" aria-describedby="my-helper-text" />
    <FormHelperText id="my-helper-text">
        We'll never share your email.
    </FormHelperText>
</FormControl>

<hr />
<br />
<FormControl>
    <InputLabel shrink={true} htmlFor="my-input">
        Email address
    </InputLabel>
    <OutlinedInput id="my-input" aria-describedby="my-helper-text" />
    <FormHelperText id="my-helper-text">
        We'll never share your email.
    </FormHelperText>
</FormControl>

Result:

I tried the shrink={true} but it's not working.

borhan008 · Accepted Answer · 2021-12-20 06:42:50Z

2

You have to add "label" attribute in OutlinedInput tag.

 <OutlinedInput id="my-input" aria-describedby="my-helper-text"   label="Email address"/>

answered Dec 20, 2021 at 6:42

borhan008

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hossein Fallah Over a year ago

Thank you. One would expect that because of the id and htmlFor, material ui can calculate this and there should be no need to duplicate that label.

Almog Zur · Accepted Answer · 2024-12-08 08:51:02Z

Key Points: The direction: "ltr" ensures the label's text aligns properly for left-to-right languages. The rules such as &.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused) let you target labels in different states. Make sure you apply ThemeProvider to wrap your app or specific components to apply these styles.

const const theme  = createTheme({ 
 components: {
  ...
  MuiInputLabel:{
  defaultProps:{},
  styleOverrides:{
   root:{
    direction:"ltr",      
    width:"100%",
    textAlign:"end",
    fontSize:20,
    "&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Muifocused)":{color:'pink'},
    "&.Mui-focused":{left:30,top:-10},
    "&.MuiFormLabel-filled:not(.Mui-focused)":{left:30, top:-6}
  },
 },
},
},

) in component exmple

const OutLineInputWrap = ({
    inputType,
    label,
    textColor,
    textColorStateFilled,
    textColorStateFocused,
     value 
     ,onChangeHndler
    }:OutLineInputWrapType)=>{
return   (
<FormControl  sx={{ m: 1, }} variant="outlined">
     <InputLabel
   variant='outlined' 
   sx={{
 
    "&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused)":{color:textColor},//init
    "&.Mui-focused ":{color:textColorStateFocused},
    "&.MuiFormLabel-filled:not(.Mui-focused)":{color:textColorStateFilled},
    }} 
    htmlFor={label}>
        {label}
    </InputLabel>
    <OutlinedInput
        id={label}
        label={label}
        type={inputType}
        value={value}
        onChange={onChangeHndler}
   />
    </FormControl>
    )
}
export default OutLineInputWrap
  type HTMLInputTypes = 
  | "button"
  | "checkbox"
  | "color"
  | "date"
  | "datetime-local"
  | "email"
  | "file"
  | "hidden"
  | "image"
  | "month"
 // | "number"  not valid TS see   https://stackoverflow.com/questions/61070803/how-to-handle-number-input-in-typescript
  | "password"
  | "radio"
  | "range"
  | "reset"
  | "search"
  | "submit"
  | "tel"
  | "text"
  | "time"
  | "url"
  | "week";


interface OutLineInputWrapType {
    inputType?: HTMLInputTypes
    label:string
    textColor?:CSSProperties['color']
    textColorStateFocused?:CSSProperties['color']
    textColorStateFilled?:CSSProperties['color']    
    value:string
    onChangeHndler:ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>

}

Collectives™ on Stack Overflow

Material UI OutlinedInput and InputLabel overlap

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related