Keep MUI TextField label on top when text field has no value

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 }} />