how to autocapitalize word in mui textfield?

Hi 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/styled

MUI 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.

codesandbox

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.

codesandbox

All the best 👍

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