how to autocapitalize word in mui textfield?
July 29, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Autocapitalize word in mui textfield
To Autocapitalize word in mui textfield, just use the toUpperCase() method in your onChange function of textfield.
it will convert enter a word to uppercase in real-time.
const handleChange = (e) => {
setText(e.target.value.toUpperCase());
};
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => handleChange(e)}
value={text}
/>;If you want to disable Autocapitalize and want to enter data as a lowercase just use the toLowerCase() method instead of the toUpperCase() method.
it will convert enter words to lowercase in real-time.
const handleChange = (e) => {
setText(e.target.value.toLowerCase());
};
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => handleChange(e)}
value={text}
/>;Today, I am going to show you. how to auto-capitalize words in mui textfield.
Installation
Emotion library is required to create react components that have styles attached to them.
npm install @mui/material @emotion/react @emotion/styledMUI material textfield with the uppercase method
To show enter the text as capital in the MUI material text field, we will use the toUpperCase() method in our text field onchange method.
Let’s start with the code part.
App.js
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
export default function BasicTextFields() {
const [text, setText] = React.useState("");
const handleChange = (e) => {
setText(e.target.value.toUpperCase());
};
return (
<Box component="form">
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => handleChange(e)}
value={text}
/>
</Box>
);
}In the above code example, I have used the @mui/material TextField component and implemented uppercase convert in text field.
Check the output of the above code example.
MUI material textfield with the lowercase method
To show enter the text as lower case in MUI material text field, we will use toLowerCase() method in our text field onchange method.
Let’s start with the code part.
App.js
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
export default function BasicTextFields() {
const [text, setText] = React.useState("");
const handleChange = (e) => {
setText(e.target.value.toLowerCase());
};
return (
<Box component="form">
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => handleChange(e)}
value={text}
/>
</Box>
);
}In the above code example, I have used the @mui/material TextField component and implemented lowercase conversion in textfeild.
Check the output of the above code example.
All the best 👍
