[TextField] Allow start adornment label to appear as `shrink=false`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When filling out an empty form, textfields with adornments should behave the same as ones without adornments. The label should sit in the textfield as a placeholder until the input is focused.

Currently, if you force the label to not shrink using shrink=false there is an overlap with the label and adornment, and the label does not shrink when focused (see image).

Examples 🌈

Motivation 🔦

I’m trying to build government utilized forms and applications where consistency and accessibility is essential. Having the label permanently shrunk gives the impression that the input field contains contents.

[shovalbatel]

I did something like that: (When the value is empty, the adornment doesn’t appear)

 <TextField
          label={label}
          type={'number'}
          InputProps={{
            startAdornment:
              currency_char && value ? <>{currency_char}</> : null,
          }}
          value={value}
          onChange={updateFieldValue}
        />

[tytgat]

I don’t think you can do this now. source : https://material.io/components/text-fields

I don’t think this is possible indeed If you put any Fragment in the startAdornment props, the label is shrinked by default Sandbox: https://codesandbox.io/s/basictextfields-demo-material-ui-forked-nkdx04?file=/demo.tsx