MUI TextField Upper case, Icon Button

How to make TextField input text to upper case in mui. Transforming the input text automatically to upper case when the user types into the input box.

Latest Material UI mui code to transform form input field text to UPPER CASE. When the user types into the input field of the form the text automatically gets transformed to upper case.

We can achieve the text transformation in mui using the below attribute to the TextField component

inputProps={{ style: { textTransform: "uppercase" } }}

MUI Input TextField input text to Upper case transform Example Code:

    import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined';
    import { InputAdornment, TextField } from '@mui/material';

  <TextField
        label={''}
        size="small"
        placeholder="Enter or Scan barcode"
        value={barcode ? barcode : ''}
        onChange={({ target }) => handleBarcodeChange(target.value)}
        inputProps={{ style: { textTransform: "uppercase" } }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <input
                accept="image/*"
                style={{ display: 'none' }}
                id="raised-button-file"
                type="file"
              />
              <label style={{ marginBottom: '0px' }} htmlFor="raised-button-file">
                <CameraAltOutlinedIcon />
              </label>
            </InputAdornment>
          ),
        }}
      />

In the above example, you can see we have transformed the input text of TextField in mui to the Upper case. This is done by adding an inputProps attribute for the TextField Component.