MUI textfield minwidth example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To set min width on mui textfield, you can use style attribute with minWidth that’s how you can define min width of material ui input.

See short example use minWidth in mui textfield.

<TextField
  type="number"
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  onChange={(e) => setNum(e.target.value)}
  value={num}
  style={{ minWidth: "500px" }}
/>

Make sure min width work properly in all devices.

In this article, I will show you how to use minWidth in mui text field using style and classname attribute.

Let’s start the tutorial Example of MUI textfield minwidth

What is a minWidth?

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

Set min width in MUI textfield using style attribute

In this example, first I will create a mui input using TextField component and after this I put style={{ minWidth: "500px" }} to set min with on input.

App.js

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

export default function BasicTextFields() {
  const [num, setNum] = React.useState();
  return (
    <Box component="form">
      <TextField
        type="number"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => setNum(e.target.value)}
        value={num}
        style={{ minWidth: "500px" }}
      />
    </Box>
  );
}

Here is the output of the above program set min width on mui textfield using style attribute.

react, mui, minwidth

Here, we are provided code sandbox links for the above program for the min width on mui textfield using style attribute. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

Set min width in MUI textfield using className attribute

In this example, first I will create a mui input using TextField component and after this I put className={"min-width-input"} to set min with on input.

in the last in css file i will create class min-width-input and add css min width css.

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() {
  const [num, setNum] = React.useState();
  return (
    <Box component="form">
      <TextField
        type="number"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => setNum(e.target.value)}
        value={num}
        className={"min-width-input"}
      />
    </Box>
  );
}

styles.css

.min-width-input {
  min-width: 500px;
}

Here is the output of the above program set min width on mui textfield using className attribute.

react, mui, minwidth

Here, we are provided code sandbox links for the above program for the min width on mui textfield using className attribute. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

Happy Coding,

I hope the above example with help you to do your task.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts