I am currently trying to implement a start input adornment in input props in my MUI TextField, however when i do so the default label sits where it sits when the text field is focused (but it's in the unfocused state as it's grey):
However when I have an end input adornment in the input probs the label sit where I want it to, in the default place:
How can I make it so I have the start input adornment and the label behaves as expected for MUI text labels?
Code:
<TextField
id="code-input"
fullWidth error={errorCondition}
value={usersVerificationCodeInput}
label={text.EnterTheCode.enterCode[userData.language]}
onChange={handleUserVerificationCodeInput}
InputLabelProps={
errorCondition ?
{
sx: {
color: usersVerificationCodeInput ? '#d32f2f' : 'rgb(95,99,104) !important',
'&.Mui-focused': {
color: '#d32f2f !important',
},
},
} : {
sx: {
color: "rgb(95,99,104)",
}
}
}
sx={
errorCondition ?
{} :
{
transform: "translate(14px, 16px) scale(1)",
'&.Mui-focused': {
transform: "translate(14px, -6px) scale(0.75)"
},
"& .MuiOutlinedInput-root": {
"&:hover:not(.Mui-focused) fieldset": {
borderColor: "#dadce0"
},
"& fieldset": {
borderColor: "#dadce0"
},
},
}
}
InputProps={{
startAdornment:
<InputAdornment position="start">
<Typography sx={{ color: '#202124', fontSize: '0.875em', fontWeight: '400' }}>
G-
</Typography>
</InputAdornment>,
}}
/>
InputProps when label behaves as expected:
InputProps={{
endAdornment:
<InputAdornment position="end">
<Typography sx={{ color: '#202124', fontSize: '0.875em', fontWeight: '400' }}>
G-
</Typography>
</InputAdornment>,
}}
Tried adding start input adornment but label moved unexpectedly

