MUI textfield minwidth example
February 07, 2023Hi 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.
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.
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.
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.
Happy Coding,
I hope the above example with help you to do your task.