Remove default animation-CodePudding

I want to remove default animation from Select label. I have this basic example:

export default function TicketProfile(props: any)  {
  return (
    <Container>
      <FormControl sx={{ ml: 1, mr: 1, minWidth: 220 }}>
      <InputLabel id="status-label">Ticket Status</InputLabel>
      <Select
        labelId="status-label"
        id="status-helper"
        name="status"
        label="Select Status"
        options={options}
      >       
      </Select>
      <FormHelperText>Select Ticket Status</FormHelperText>
    </FormControl>
    </Container>
  );
}

Sandbox: https://stackblitz.com/edit/react-ts-dpj9vp?file=Hello.tsx

As you an see there is a label Ticket Status which moves to top when I click on the list. How I can make the text static - always on the top.

CodePudding user response：

There is shrink property on InputLabel which you can use.

<InputLabel id="status-label" shrink>
  Ticket Status
</InputLabel>

See InputLabel API page