Force an Input field to Uppercase in React


Borislav Hadzhiev

Last updated: Apr 28, 2022


Photo from Unsplash

Force an Input field to Uppercase in React #

To force an input field to uppercase in React:

  1. Store the value of the input in a state variable.
  2. Set the onChange prop on the input.
  3. Use the toUpperCase() method to uppercase the field's value, e.g.
import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(''); const handleChange = event => { const result =; setMessage(result); }; return ( <div> <div>hello world</div> <input id="message" name="message" type="text" value={message} onChange={handleChange} /> </div> ); }; export default App;

input uppercase only

We set the onChange prop on the input element, so every time its value changes the handleChange function is invoked.

The target property on the event object refers to the input field, so we can access the input's value as

The value of an input field is guaranteed to be a string, even if the type of the input is set to number, so we can directly call the toUpperCase method on it.

const str = 'hello world'; const upper = str.toUpperCase(); console.log(upper); // 👉️ "HELLO WORLD"

The toUpperCase method returns a new string that represents the calling string converted to upper case.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.