Material UI InputLabel - disable animation when input is empty

user_1479895 0
Viewed 8157

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

enter image description here

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.

enter image description here

How can I do this?

Example code:

     <FormControl>
        <InputLabel htmlFor="name">Name</InputLabel>
        <Input name="name"
               value={name}/>
      </FormControl>
material-ui
2 Answers

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

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

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>

enter image description here

user_14798950
Related