Material UI InputLabel - disable animation when input is empty

Question

When my input field is empty and not focused, Material UI would place the label inside the input field as a placeholder.

What I want is, to have the label above the input field all the times, similarly to what it looks like if the input field is selected.

How can I do this?

Example code:

     <FormControl>
        <InputLabel htmlFor="name">Name</InputLabel>
        <Input name="name"
               value={name}/>
      </FormControl>

Answer 1

For those looking for how to achieve this with TextField component, here:

<TextField
  variant="outlined"
  InputLabelProps={{
    shrink: true,
  }}
/>

Answer 2

After 30 mins of pulling my hair... I finally got it. The property you are looking for is not called disableAnimation as one could thought, it's the shrink property. API docs - https://material-ui.com/api/input-label/

  <FormControl>
    <InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
    <Input name="name"
           value={name}/>
  </FormControl>