Material UI Set Max Length in Text field - MUI | React Js

In Material-UI, a React UI framework, the TextField component is used for text input. To set a maximum length (max length) for input in a TextField, utilize the 'InputProps' property. Within it, use the 'inputProps' attribute and set the 'maxLength' property to the desired character count. This enforces the limit, visually indicating it to the user. Example: <TextField InputProps={{ inputProps: { maxLength: 50 } }} label="Max 50 characters" />. This restricts input to 50 characters and displays a corresponding label. It enhances user experience by preventing excessive input and providing clear guidance.

written

reviewed

updated

How to set max length in mui textfield?

In this React.js code using Material-UI, a character limit is set for an MUI TextField. The component maintains a 'text' state to capture user input and an 'error' state to indicate if the input exceeds the character limit (which is set to 10 characters in this example). When users type in the TextField, the 'handleInputChange' function checks the input length against the limit. If it's within the limit, the text state is updated, and errors are cleared. If it exceeds the limit, an error state is set. The TextField displays an error message when the limit is exceeded. Material-UI components, such as Typography and Container, are used for styling and layout.

Material ui set character limit on mui textfield in react js?

    <script type="text/babel">
        const { useState } = React;

        function App() {
            const [text, setText] = useState('');
            const [error, setError] = useState(false);

            const handleInputChange = (e) => {
                const inputText = e.target.value;
                const maxLength = 10;

                if (inputText.length <= maxLength) {
                    setText(inputText);
                    setError(false);
                } else {
                    setError(true);
                }
            };

            return (
                <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}>
                    <Typography variant="h4" component="h1" gutterBottom>
                     Material ui Set Max Length in MUI TextField
                    </Typography>
                    <TextField
                        label="Max Length"
                        value={text}
                        onChange={handleInputChange}
                        error={error}
                        fullWidth
                        helperText={error ? 'Text is too long' : ''}
                    />
                </Container>
            );
        }
    </script>
    <script type="text/babel">
        const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, TextField } = MaterialUI;
        const theme = createTheme({
            palette: {
                primary: {
                    main: '#556cd6',
                },
                secondary: {
                    main: '#19857b',
                },
                error: {
                    main: colors.red.A400,
                },
            },
        });

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <App />
            </ThemeProvider>
        );
    </script>

Run

Output of Material ui set character limit on mui textfield in react js?

In Material-UI for ReactJS, you can set a maximum length for a Text Field component by using the 'inputProps' property. Simply provide 'inputProps' with an object containing the 'maxLength' attribute set to your desired character limit. For example, to restrict input to 5 characters:

Material ui Set Max Length in MUI TextField using inputProps

<TextField
       label="Max Length"
       value={text}
       onChange={handleInputChange}
       fullWidth
       inputProps={{ maxLength: 5 }}
/>

Run

React JS Tutorial

Material UI Set Max Length in Text field - MUI | React Js

Feedback for Abhishek

How to set max length in mui textfield?

Material ui set character limit on mui textfield in react js?

Output of Material ui set character limit on mui textfield in react js?

Material ui Set Max Length in MUI TextField using inputProps