how to change height of mui textfield?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change the height of the mui textfield, you can use the size attribute with small and medium values and for the custom height you have to use inputProps with style height, that’s how you can change the height of mui textfield.

See a short example to use inputProps with style height.

<TextField
  type="text"
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  value="Custom"
  inputProps={{
    style: {
      height: "50px",
    },
  }}
/>

In this article, I will show you two ways to change the height of mui text field.

1. Change mui textfield size using the size attribute
2. Change mui textfield height using the inputProps attribute

Let’s start with installation.

To use mui input you have to install the mui library.

Installation

Emotion library is required to create react components that have styles attached to them.

npm install @mui/material @emotion/react @emotion/styled

Change mui textfield size using size attribute

In this example, I will use size attribute of mui text field to resize the mui input.

As we know, size attribute is provided by mui library and have only two options small and medium.

If you want to put a custom height size follow the second example of textfield size material ui.

App.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import "./styles.css";

export default function BasicTextFields() {
  return (
    <Box component="form">
      <p>Example of size small</p>
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        value="Small"
        size="small"
      />
      <p>Example of size medium</p>
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        value="Normal"
        size="medium"
      />
    </Box>
  );
}

In the above code example, I have used size attributes with small and medium options.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program how to change height of textfield in material ui. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Change mui textfield height using inputProps attribute

In this example, I will use inputProps attribute of mui text field to change the size of material input.

As we know, using inputProps attribute you can directly pass your props into native element.

So here, I will set the height 50px using inputProps style height attribute.

App.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import "./styles.css";

export default function BasicTextFields() {
  return (
    <Box component="form">
      <p>Example of input prop style height</p>
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        value="Normal"
        inputProps={{
          style: {
            height: "50px",
          },
        }}
      />
    </Box>
  );
}

In the above code example, I have used input props attribute with height to set custom height into mui textfield.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program textfield mui height. Then you can use whenever you want and do the changes as per your requirements.

Try It Yourself

All the best 👍