Set a character limit on an Input field in React.js

# Set a character limit on an Input field in React.js

Use the maxLength prop to set a character limit on an input field in React, e.g. <input maxLength={5} />.

The maxLength attribute defines the maximum number of characters the user can enter into an input field or a textarea element.

input max length

App.js

Copied!
import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');

  const handleNameChange = event => {
    setFirstName(event.target.value);
  };

  return (
    <div>
      <h2>Very long string</h2>
      <input
        maxLength={5}
        type="text"
        id="first_name"
        name="first_name"
        value={firstName}
        onChange={handleNameChange}
      />
    </div>
  );
};

export default App;

The code for this article is available on GitHub

React props are case-sensitive, so make sure to use maxLength (camelCase), and not maxlength.

Notice that the type attribute of the input field is set to text. This wouldn't work if the field's type were set to number.

The example from the last code snippet also works with input fields of type number.

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

# Setting a character limit on a `textarea` element

The same approach can be used for setting a character limit on a textarea element.

App.js

Copied!
import {useState} from 'react';

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

  const handleMessageChange = event => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <h2>Very long string</h2>
      <textarea
        maxLength={5}
        id="message"
        name="message"
        value={message}
        onChange={handleMessageChange}
      />
    </div>
  );
};

export default App;

setting character limit on textarea element

The code for this article is available on GitHub

The maxLength prop defines the maximum length of characters the user can enter into the input field or the textarea element.

This approach also prevents the user from pasting a longer string into the input field.

If you need to restrict an input field to only letters, check out the following article.

# Setting a character limit on the field in your `handleChange` function

Alternatively, you can set a character limit on the input field in your handleChange function.

App.js

Copied!
import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');

  const handleNameChange = event => {
    const limit = 5;

    // 👇️ only take first N characters
    setFirstName(event.target.value.slice(0, limit));
  };

  console.log(firstName);

  return (
    <div>
      <h2>Very long string</h2>

      <input
        type="text"
        id="first_name"
        name="first_name"
        value={firstName}
        onChange={handleNameChange}
      />
    </div>
  );
};

export default App;

setting character limit on field in handle change function

The code for this article is available on GitHub

We used the String.slice() method to get an extract a section of the string that has a maximum of 5 characters.

We passed the following 2 parameters to the String.slice() method:

Name	Description
`beginIndex`	The zero-based index at which we begin extracting characters from the string
`endIndex`	The index of the first character to exclude from the returned substring

If endIndex is greater than the length of the string, the slice() method extracts characters to the end of the string. For example, "hello".slice(0, 100) returns "hello".

I've also written a tutorial on how to use the substring() method in React.

# Limit the length of an `input` type `number`

This approach also works if you need to limit the length of an input with type number.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  const [num, setNum] = useState('');

  const handleNumChange = event => {
    const limit = 4;
    setNum(event.target.value.slice(0, limit));
  };

  console.log(num);

  return (
    <div>
      <h2>123456789</h2>
      <input
        type="number"
        id="num"
        name="num"
        value={num}
        onChange={handleNumChange}
      />
    </div>
  );
};

export default App;

limit length of input type number

The input element in the example has type set to number.

However, event.target.value still has a type of string, so we are able to limit the length of the input type number field using the same approach.

input type number limit

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set a character limit on an Input field in React.js