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

avatar

Borislav Hadzhiev

Sat Apr 16 20222 min read

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
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;

Props in React 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.

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

App.js
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;

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.

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

App.js
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;

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

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

NameDescription
beginIndexThe zero-based index at which we begin extracting characters from the string
endIndexThe 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".

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

App.tsx
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;

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

Use the search field on my Home Page to filter through my more than 1,000 articles.