当文本字段没有值时，将 MUI TextField label 保持在顶部

Question

So this should be simple but I don't see a clear answer. The labels I have looks like this:

.

As you can see the bottom 2 fields have the label on top since they have a default value whereas the top on "ML Features" does not and the label moves to the middle of the TextField .

The code looks like this:

<TextField
    label="ML Features" // or any other field
    ...
   >
</TextField>

How can I keep the label always on the top?

Answer 1

You can set shrink to true in InputLabelProps . For more reference, see InputLabel API here .

<TextField label="ML Features" InputLabelProps={{ shrink: true }} />

Answer 2

you need to add focused so that it will be in top without any value