How to restrict user character input limit in ReactJS ?

Last Updated : 09 Nov, 2023

To restrict the user character input limit in React JS we can simply set a max input limit to the input box or we can also monitor the input length and make a custom function to set the restriction.

Pre-requisite:

Approaches to restrict user character input limit in React JS are:

Table of Content

Using maxLength attribute
Using onChange event

Steps to Create React Application:

Step 1: Go to your command prompt and write the below command to create a react app.

npx create-react-app <YOUR_APP_NAME>

Step 2: Then go to your app folder by typing the below command

cd <YOUR_APP_NAME>

Project Structure:

Approach 1: Using maxLength

We will use maxLength attribute for our input. It is the same as the maxlength attribute used for HTML. It restricts the user to enter characters till it reaches the maxLength limit that we have set.

Example: This example uses max legth attribute to implement the restriction for character input.

JavaScript

// Filename - App.js

function App() {
    return (
        <div className="App">
            <label>Name:</label>
            <input name="name" type="text" maxLength={10} />
        </div>
    );
}

export default App;

Step to run the application: Run the following command to start your app in your localhost:3000.

npm start

Output: This output will be visible on the http:// localhost:3000 on the browser window.

We can see that after the 10th character we cannot further add anything.

Approach 2: using onChange event

This approach include creating a simple form component that asks the user to enter their username, the moment the character length exceeds more than 10 an alert will be shown. In this file, we are using useState a react-hook to maintain the state userName. We will create a function handleChange that will track the length of the user of the character is putting, here 'e' is the browser event. If it is equal to 10 then the alert will pop up or else it will be added to the state.

Example: This example implements character limit for the user input using the onChange event.

JavaScript

// Filename - App.js

import React, { useState } from "react";

const Form = () => {
    const [userName, setuserName] = useState("");

    const handleChange = (e) => {
        // Here we are checking if the length is equal to 10
        if (e.target.value.length === 10) {
            window.alert(
                "Username shouldn't exceed 10 characters"
            );
        }
        setuserName(e.target.value);
    };

    return (
        <div>
            <label>Please enter username:</label>
            <input
                name="username"
                value={userName}
                onChange={handleChange}
            />
        </div>
    );
};

function App() {
    return (
        <div className="App">
            <h1>Hey! Geek Welcome</h1>
            <Form />
        </div>
    );
}

export default App;