Restrict an Input field to only Letters in React

# Table of Contents

1. Restrict an Input field to only Letters in React
2. Force an Input field to Uppercase in React

# Restrict an Input field to only Letters in React

To restrict an input field to only letters in React.js:

1. Set the type of the input field to text.
2. Add an onChange event handler that removes all characters but letters.
3. Keep the input value in a state variable.

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/[^a-z]/gi, '');

    setMessage(result);
  };

  return (
    <div>
      <div>123 hello 456 world</div>
      <input
        id="message"
        name="message"
        type="text"
        value={message}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

We used the useState hook to keep track of the input field's value.

Copied!
const [message, setMessage] = useState('');

Every time the input's value changes, the handleChange function is invoked.

Copied!
const handleChange = event => {
  const result = event.target.value.replace(/[^a-z]/gi, '');

  setMessage(result);
};

We passed the following 2 arguments to the String.replace() method to remove all non-letters.

The forward slashes / / mark the beginning of the regular expression.

Copied!
const result = event.target.value.replace(/[^a-z]/gi, '');

The square brackets [] are called a character class. In our character class, we match all non-letters.

When used inside of the square brackets [], a caret ^ symbol means "not the following". It's basically a negated match.

We used the g (global) flag because we want to match all occurrences of non letters in the string.

The i flag allows us to match all letters in a case-insensitive manner.

Every time the input's value changes, we replace all non-letter characters with an empty string to remove them.

The value of the input field always contains only lowercase or uppercase letters.

If you ever need help reading a regular expression, check out this regular expression cheat sheet by MDN.

It contains a table with the name and the meaning of each special character with examples.

I've also written an article on how to create a numbers-only input field in React.

# 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. event.target.value.toUpperCase().

Copied!
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    const result = event.target.value.toUpperCase();

    setMessage(result);
  };

  return (
    <div>
      <div>hello world</div>

      <input
        id="message"
        name="message"
        type="text"
        value={message}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

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

Copied!
const handleChange = event => {
  const result = event.target.value.toUpperCase();

  setMessage(result);
};

The value of an input field is guaranteed to be a string, even if the type of the input is set to number.

We can directly call the toUpperCase() method on event.target.value to convert the input field's value to uppercase.

Copied!
const str = 'bobbyhadz.com';

const upper = str.toUpperCase();
console.log(upper); // 👉️ "BOBBYHADZ.COM"

The toUpperCase method converts the given string to uppercase and returns the result.