Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use MUI Textarea to Enhance User Experience

The Textarea is a part of the Material UI (MUI) form component collection, designed to enhance user experience. The Textarea component offers a versatile solution for multiline text fields. With the ability of the Textarea to wrap overflowing text inputs, it utilizes Material UI styling to render an HTML textarea element that grows vertically to accommodate these text inputs. Essentially, the Textarea component automatically adjusts its height as a response to keyboard inputs and window resizing events. Let us explore the smooth integration of functionality and aesthetics that Textarea offers.

Exploring MUI Textarea

The Material UI component includes some properties and features necessary to build a basic Textarea. Although we will discuss them better later in this article, let’s briefly look at the following properties and features.

  1. Props and other APIs: The Textarea supports a list of props and APIs, including form props, rows, color, size, and variants.

  2. Validation and error handling: The Textarea handles validation by toggling the error state between true or false using the error prop.

  3. Event handling: The Textarea supports a few props that allow the user to trigger input events specific to the application requirements, such as the change event (onChange), focus event, etc.

  4. Accessibility: To ensure the Textarea is accessible, it’s recommended to link the textarea component to the Form. This allows the FormControl to automatically generate a unique ID that links the textarea component with the FormLabel.

  5. Styling: Material UI provides a flexible styling system to customize the Textarea component such as with minRows/maxRows, classes, etc.

For more detailed information, you can refer to the official Material UI documentation. However, to speed up your development process with MUI, you might want to consider visiting the Purecode.ai Marketplace to access over 10000+ AI-generated ready-made templates and components. Next, we will discuss the technical requirements and the core features of building a beautiful and fully functional Textarea component in Material UI.

Technical Specifications and Requirements

Depending on your project requirements, you must install either the Base UI to use the TextareaAutosize component or the Joyful UI to use the Textarea component. Below is a list of commands to run in your terminal:

Run one of the following to add Base UI to your project:

npm install @mui/base

or

yarn add @mui/base

or

pnpm add @mui/base

Run one of the following commands to add Joyful UI to your react project:

npm install @mui/joy @emotion/react @emotion/styled

or

yarn add @mui/joy @emotion/react @emotion/styled

or

pnpm add @mui/joy @emotion/react @emotion/styled

Core Features of MUI Textarea

Previously, we briefly discussed the features and properties of the Textarea component. We will now dive into the core components associated with Material UI Textarea. These include the following:

  1. maxRows and minRows

  2. defaultValue and value

  3. placeholder

  4. onChange

  5. disabled and readOnly

maxRows and minRows

By default, the Textarea component renders a single row when empty. The minRows and maxRows make it possible to define the minimum and maximum number of rows of content to display. The code below is a typical example of using minRows and maxRows in the Textarea component:

<Textarea
  aria-label="minimum rows"
  minRows={3}
  placeholder="Minimum of 3 rows"
/>

Setting the minimum rows with minRows.

<Textarea
  aria-label="maximum rows"
  maxRows={6}
  placeholder="Maximum of 6 rows"
/>

Setting the maximum rows with maxRows.

defaultValue and value

These props are used to set the value of the Textarea component. Where defaultValue represents the value the first time the Textarea component renders, the value prop represents the input’s current value. The following example shows how to use the defaultValue and value props:

import { Box, Textarea } from "@mui/joy";

function TextareaExample() {
  return (
    <Box sx={{ maxWidth: "500px", margin: "0 auto", width: "100%" }}>
      <Textarea
        defaultValue="Text area with default value"
        minRows={2}
      />
    </Box>
  );
}

export default function App() {
  return (
    <div>
      <Box sx={{ paddingTop: "50px" }}>
        <Box
          sx={{
            textAlign: "center",
            fontFamily: "sans-serif",
            marginBottom: "50px"
          }}
        >
          <h1>An example using defaultValue prop</h1>
        </Box>
        <TextareaExample />
      </Box>
    </div>
  );
}
A visual representation of Textarea component using the defaultValue prop
import { useState } from "react";
import { Box, Textarea } from "@mui/joy";

function TextareaExample() {
  const [textareaVal, setTextareVal] = useState("");
  return (
    <Box sx={{ maxWidth: "500px", margin: "0 auto", width: "100%" }}>
      <Textarea
        value={textareaVal}
        minRows={2}
        placeholder="Using the value prop"
      />
    </Box>
  );
}

export default function App() {
  return (
    <div>
      <Box sx={{ paddingTop: "50px" }}>
        <Box
          sx={{
            textAlign: "center",
            fontFamily: "sans-serif",
            marginBottom: "50px"
          }}
        >
          <h1>An example using the Value prop</h1>
        </Box>
        <TextareaExample />
      </Box>
    </div>
  );
}
A visual representation of Textarea component using the value prop

From the images above, you can notice that the text in the defaultValue example has a deeper color than the value prop example. It is because the text area in the value prop example is being rendered with the placeholder default styling since it neither has a current value nor a default value.

placeholder

This prop provides a way to set a short hint describing the expected value of an input in the Textarea component. Below is the code of a Textarea with a specified placeholder value:

<Textarea placeholder="Enter a short note here" />

onChange

The onChange handler detects input changes and updates the content of the Textarea component. The code example below shows how to use the onChange prop to handle the textarea element content update:

import { useState } from "react";
import { Box, Textarea } from "@mui/joy";

function TextareaExample() {
  const [textareaVal, setTextareVal] = useState("");

  const changeHandler = (e) => {
    setTextareVal(e.target.value)
  }

  return (
    <Box sx={{ maxWidth: "500px", margin: "0 auto", width: "100%" }}>
      <Textarea
        value={textareaVal}
        minRows={2}
        onChange={changeHandler}
        placeholder="Enter to test the change handler"
      />
    </Box>
  );
}

disabled and readOnly

These props provide a way to control the state of the Textarea component. While disabled makes the textarea element uneditable, readOnly ensures it is read-only. The code example below shows how to set these props on the Textarea:

<Textarea placeholder="A disabled text area" disabled />
<Textarea placeholder="A read-only text area" readOnly />

Variations of Multiline Components in MUI

Three components are responsible for displaying multiline contents in the material ui library. These include the Textfield component, the Textarea Autosize component, and the Textarea component. Let us discuss these components and how to use them to render multiline text.

Textarea Autosize component

The Textarea Autosize is a part of the independent Base UI component library. The Textarea Autosize component is a utility Material UI component that renders a textarea HTML element that automatically adjusts its height to match the amount of content within. An empty Textarea Autosize component renders as a single row by default. Changes in the keyboard inputs and window resizing events cause the Textarea Autosize to adjust automatically. The following example shows a demo of using Textarea Autosize:

import React from "react";
import { Box } from "@mui/material";
import { TextareaAutosize as BaseTextareaAutosize } from "@mui/base";
import { styled } from "@mui/system";

const grey = {
  50: "#F3F6F9",
  100: "#E5EAF2",
  200: "#DAE2ED",
  300: "#C7D0DD",
  400: "#B0B8C4",
  500: "#9DA8B7",
  600: "#6B7A90",
  700: "#434D5B",
  800: "#303740",
  900: "#1C2025"
};

const TextareaExample = styled(BaseTextareaAutosize)(
  ({ theme }) => `
    width: 100%;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid ${theme.palette.mode === "dark" ? grey[700] : grey[200]};
    color: ${theme.palette.mode === "dark" ? grey[300] : grey[900]};
    background: ${theme.palette.mode === "dark" ? grey[900] : "#fff"};
  `
);

export default function App() {
  return (
    <div>
      <Box sx={{ padding: "50px 80px 0" }}>
        <Box
          sx={{
            textAlign: "center",
            fontFamily: "sans-serif",
            fontSize: "14px",
            marginBottom: "50px"
          }}
        >
          <h1>An example using the TextareaAutosize</h1>
        </Box>
        <TextareaExample placeholder="Enter a lengthy content to see it adjust automatically" />
      </Box>
    </div>
  );
}

Textarea component

The Textarea component is a part of the Joyful UI component library. The Textarea component is built on top of the Base UI TextareaAutoSize component. As such it also renders a textarea element that can automatically adjust its height to fit the length of the content. The example below shows a demo of using Textarea:

import { Box, Textarea } from "@mui/joy";

export default function TextareaExample() {
  return (
    <Box>
      <Textarea
        size="md"
        color="primary"
        placeholder="Enter text to see it adjust it's height"
      />
    </Box>
  );
}

Textfield component

The TextField component allows users to input and edit text content. The following article covers more grounds on the Material UI TextField component. By default, the TextField wrapper component is a complete form control that includes a label, input, and helper text. However, when the multiline prop is applied, the text field transforms into a TextareaAutosize element, which dynamically adjusts the height to match its content. The example code below shows a demo of using TextField for multiline content:

import { Box, TextField } from "@mui/material";

function TextareaExample() {
  return (
    <Box>
      <TextField
        size="md"
        multiline
        color="primary"
        placeholder="Enter text to see it adjust it's height"
      />
    </Box>
  );
}

export default function App() {
  return (
    <div>
      <Box
        sx={{
          maxWidth: "500px",
          width: "100%",
          margin: "100px auto 0",
          fontFamily: "sans-serif",
          fontSize: "14px",
          textAlign: "center"
        }}
      >
        <h1>An example of a basic multi line Text field</h1>
        <TextareaExample />
      </Box>
    </div>
  );
}

I’d recommend you watch the video tutorial below to fully grasp converting the textField component to accommodate multiline text:

Difference Between the MUI Multiline components: Table

Textarea ComponentTextField Component
It automatically renders the standard HTML textarea as its default.By default, it renders the standard input and label elements.
It offers a variety of ways to customize to your specific preferences.Its customization capabilities are restricted.
Achieving a unique focus style and implementing a floating label involves a considerable amount of styling work.Customizing the focus state and floating label can be done with ease.
Implementing visual feedback with an error message through validation demands a substantial amount of code.Implementing validation along with suitable visual indicators involves writing a smaller amount of code.
It is a multiline text field by default.You can transform it into a multiline text field using the multiline prop.

React Material UI Textarea Variants

The Textarea component supports four global variants, these include:

  1. Solid: This variant gives the Textarea a filled or solid appearance compared to the other variants. By default, the Textarea component solid variant. The code below is that of a solid variant:

    <Textarea name="Solid" placeholder="Type in here…" variant="solid" />
  2. Outlined: This variant sets an outlined border around the textarea. The outlined variant syntax is as follows:

    <Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
  3. Soft: This variant gives the Textarea a softer or subtler appearance. The Textarea soft variant has faint colors, less pronounced borders, or other stylistic elements that convey a more subdued or gentle visual effect. Its syntax is as follows:

    <Textarea name="Soft" placeholder="Type in here…" variant="soft" />
  4. Plain: This variant does not add any additional styling to the Textarea component, it assumes the default style of the textarea element. Its syntax is as follows:

    <Textarea name="Plain" placeholder="Type in here…" variant="plain" />A visual representation of the variants of the Joyful Ui library Textarea component.

Other Components of MUI Textarea

Previously, we discussed a few core properties and features necessary to build a simple Material UI Textarea component. This section will cover the other properties you will probably need to develop a visually appealing and interactive textarea. These properties include the following:

  • Sizes

  • Colors

  • Form props

Sizes

The textarea Material UI component has built-in support for three sizes: sm, md (the default), and lg. These size options determine the dimensions of the text area by modifying its padding and font size. The syntax is as follows:

<Textarea size="sm" name="Size" placeholder="Small" />
<Textarea size="md" name="Size" placeholder="Medium" />
<Textarea size="lg" name="Size" placeholder="Large" />
A visual representation of the different textarea sizes.

Colors

Changing the palette switches the color scheme used for styling the text field. This alteration affects the appearance of both the text and the border surrounding the text area.

import { Box, Textarea } from "@mui/joy";

function TextareaExample() {
  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <Textarea
        size="md"
        color="primary"
        placeholder="Enter text to see it adjust it's height"
      />

      <Textarea
        name="Primary"
        placeholder="Type in here…"
        variant="outlined"
        color="primary"
      />
      <Textarea
        name="Neutral"
        placeholder="Type in here…"
        variant="outlined"
        color="neutral"
      />
      <Textarea
        name="Danger"
        placeholder="Type in here…"
        variant="outlined"
        color="danger"
      />
      <Textarea
        name="Warning"
        placeholder="Type in here…"
        variant="outlined"
        color="warning"
      />
    </Box>
  );
}

export default function App() {
  return (
    <div>
      <Box
        sx={{
          maxWidth: "500px",
          width: "100%",
          margin: "100px auto 0",
          fontFamily: "sans-serif",
          textAlign: "center"
        }}
      >
        <h1>An example of using colors in Textarea</h1>
        <TextareaExample />
      </Box>
    </div>
  );
}
A visual representation of applying different color palettes to the textarea.

Here is a good read to learn how to customize the Material UI themes for your project requirements. Purecode.ai also offers a way to quickly generate custom themes built on top of MUI for your React project.

Form props

Aside from the value, disabled and placeholder props discussed earlier. The Textarea component also supports form attributes like required.

import { Box, Button, Textarea } from "@mui/joy";

export default function TextareaExample() {
  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <form
        onSubmit={(event) => {
          event.preventDefault();
        }}
      >
        <Textarea
          placeholder="Try to submit with no text!"
          required
          sx={{ mb: 1, maxWidth: "360px", mx: "auto" }}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Box>
  );
}

Ensuring Accessibility in Textarea

Two methods are available to achieve an accessible textarea, they include the manual method and the use of a FormLabel with the TextareaAutosize.

The manual method can be achieved by targeting the Textarea slot in the following way:

<label htmlFor="set-unique-id-here">Label</label>
<Textarea
  slotProps={{
    textarea: {
      id: "set-unique-id-here",
    }
  }}
/>

However, for better accessibility, Material UI recommends associating the TextareaAutosize component with a FormLabel. This connection enables FormControl to automatically generate a unique ID, establishing a link between the FormLabel and the TextareaAutosize. This linkage enhances the overall accessibility of the Textarea component. The code example below shows how to do it:

<FormControl>
  <FormLabel>Label</FormLabel>
  <Textarea placeholder="Some text to enter" minRows={2} />
</FormControl> 

Handling Textarea in MUI

Uncontrolled vs Controlled Textarea: Best Practices

The Textarea can be controlled or uncontrolled depending on how it is managed.

Uncontrolled Textarea

An uncontrolled component is one that manages its own state without being influenced by the parent through props. When the Textarea is uncontrolled, its current value cannot be accessed. However, an uncontrolled component value can be retrieved with ref. The sample code below shows how to retrieve the value from an uncontrolled textarea element:

import React, { useState, useRef } from "react";
import { Box, Button } from "@mui/material";
import { Textarea, FormHelperText } from "@mui/joy";

function UncontrolledTextarea() {
  const [helperText, setHelperText] = useState("Text about to change");
  const inputRef = useRef(null);

  return (
    <Box sx={{ maxWidth: "400px", mx: "auto", mt: 4 }}>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          const textarea = inputRef.current.firstChild;
          if (textarea.value) setHelperText(textarea.value);
        }}
      >
        <Box>
          <Textarea
            ref={inputRef}
            variant="outlined"
            color="neutral"
            size="md"
            placeholder="Enter some text here to change the helper text"
          />
          <FormHelperText>{helperText}</FormHelperText>
        </Box>
        <Button type="submit" variant="contained" sx={{ mt: 4 }}>
          Submit
        </Button>
      </form>
    </Box>
  );
}

Controlled Textarea

A controlled component is one whose state is influenced by the parent using props. The controlled component receives its current value by setting the value prop to a state variable and updating the value predictably and reliably with the onChange event handler. The sample code below shows how to control the Textarea:

import React, { useState } from "react";
import { Box, Button } from "@mui/material";
import { Textarea, FormHelperText } from "@mui/joy";

function ControlledTextarea() {
  const [helperText, setHelperText] = useState("Text about to change");
  const [input, setInput] = useState("");

  return (
    <Box sx={{ maxWidth: "400px", mx: "auto", mt: 4 }}>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          if (input) setHelperText(input);
        }}
      >
        <Box>
          <Textarea
            variant="outlined"
            color="neutral"
            size="md"
            value={input}
            placeholder="Enter some text here to change the helper text"
            onChange={(e) => {
              setInput(e.target.value);
            }}
          />
          <FormHelperText>{helperText}</FormHelperText>
        </Box>
        <Button type="submit" variant="contained" sx={{ mt: 4 }}>
          Submit
        </Button>
      </form>
    </Box>
  );
}

From the visual presentation above and the code sample, you can notice that we used a button to trigger a submit event. To learn more about the Button component check out this Material UI Button article.

Focusing Techniques for Enhanced User Experience

In this section, we will discuss how to manage the focus state of the text field. This state is controlled by the focus event using the onFocus and onBlur events props. However, Material UI programmatically sets a focus ring by default, which can also be customized as follows:

import React from 'react';
import { Textarea } from '@mui/joy';

export default function ExampleTextarea() {
  return (
    <Textarea
      placeholder="Enter to focus the textarea"
      minRows={2}
      sx={{
        '--Textarea-focusedInset': 'var(--any, )',
        '--Textarea-focusedThickness': '0.25rem',
        '--Textarea-focusedHighlight': 'rgba(13,110,253,.25)',
        '&::before': {
          transition: 'box-shadow .15s ease-in-out',
        },
        '&:focus-within': {
          borderColor: '#86b7fe',
        },
      }}
    />
  );
}

Implementing Validation Strategies in MUI Textarea

Implementing form validation in Material UI involves assessing the value of a text field against specific criteria. The standard way is to dynamically toggle the error prop between true and false based on a valid input, enabling us to offer visual feedback to the user. However, you can customize the Textarea component to manage form validation and show error messages.

Here is a practical example of handling validation with an error prop:

import React, { useState } from "react";
import { Box, Button } from "@mui/material";
import { Textarea } from "@mui/joy";

function ValidatedTextarea() {
  const [text, setText] = useState("");
  const [hasError, setHasError] = useState(false);

  const alphaRegx = /^[A-Za-zs.]+$/;

  const submitHandler = (e) => {
    e.preventDefault();
    if (!text) {
      setHasError(true);
      return;
    }

    if (!alphaRegx.test(text)) {
      return;
    }
  };

  return (
    <Box sx={{ maxWidth: "400px", mx: "auto", mt: 4 }}>
      <form onSubmit={submitHandler}>
        <Textarea
          placeholder="Enter only alphabets…"
          value={text}
          error={hasError}
          onChange={(e) => {
            if (alphaRegx.test(e.target.value)) {
              setHasError(false);
            } else {
              setHasError(true);
            }
            setText(e.target.value);
          }}
        />
        <Button sx={{ mt: 4 }} type="submit" variant="contained">
          Submit
        </Button>
      </form>
    </Box>
  );
}

Here is an example of customizing validation:

function ValidatedTextarea() {
  const [text, setText] = useState("");
  const [error, setError] = useState({ message: "", isError: false });

  const alphaRegx = /^[A-Za-zs.]+$/;

  const submitHandler = (e) => {
    e.preventDefault();
    if (!text) {
      setError((prev) => ({
        ...prev,
        message: "Text field is required",
        isError: true
      }));
      return;
    }

    if (!alphaRegx.test(text)) {
      return;
    }
  };

  return (
    <Box sx={{ maxWidth: "400px", mx: "auto", mt: 4 }}>
      <form onSubmit={submitHandler}>
        <Box>
          <Textarea
            placeholder="Enter only alphabets…"
            value={text}
            color={error.isError ? "danger" : "neutral"}
            onChange={(e) => {
              if (alphaRegx.test(e.target.value)) {
                setError((prev) => ({ ...prev, isError: false }));
              } else {
                setError((prev) => ({
                  ...prev,
                  message: "Please, enter a valid text",
                  isError: true
                }));
              }
              setText(e.target.value);
            }}
          />
          {error.isError && (
            <FormHelperText sx={{ color: "#C41C1C" }}>
              {error.message}
            </FormHelperText>
          )}
        </Box>
        <Button sx={{ mt: 4 }} type="submit" variant="contained">
          Submit
        </Button>
      </form>
    </Box>
  );
}

export default function Example() {
  return (
    <div>
      <Box sx={{ fontFamily: "sans-serif", textAlign: "center", pt: 10 }}>
        <h1>Handling the text area validation</h1>
        <ValidatedTextarea />
      </Box>
    </div>
  );
}

Real-World Applications of MUI Textarea

Material UI Textarea has been integrated into many websites, particularly because of its visually appealing design, variety of features, and customization options. In the next section, we will look into its use cases in these applications.

Use Cases in Web Applications

The use cases of Material UI Textarea include the following:

  • Contact and Survey forms: The Material UI Textarea is commonly used in forms where users need to enter many text that provides detailed feedback or inquiries. An example is the contact form on Capgemini.

  • Comment sections: In certain blogs or user-generated content platforms, Material UI Textarea is used in the comment sections to allow users to express their thoughts in a more extended and visually appealing way. An example is the comment textarea modal of medium articles. You can check out the following article to learn more about the Material UI modal if you are interested in adding a textarea to a modal in your React project.

  • Product demonstration request: Certain web applications use Material UI Textarea to allow customers/users to submit a product demonstration request directed towards a company’s proprietary solution. An instance of this is the product demonstration request page on the official website of BrainCube.

  • Product review: Material UI Textarea can be used to collect detailed product reviews, opinions, and suggestions from customers, providing valuable feedback.

Final Thoughts on MUI Textarea

We’ve explored the range of features Material UI Textarea offers in the modern web development landscape. We learned how to customize the text field depending on the complexity of the project to ensure an engaging, accessible, and seamless experience for all users. Now, that you know how to create powerful and user-friendly textarea for a variety of use cases in a React application, go forth and shine.

In conclusion, Material UI Textarea stands out as versatile and user-friendly. Its remarkable adaptability to different scenarios and varying levels of application complexity make it a commendable choice for developers seeking to enhance user experience with the flexible Textarea component.

Further Reading and Recommended Resources

  • For more information on customizing the TextField component, check out the video tutorial below:

Ofili Chukwuemeka Timothy

Ofili Chukwuemeka Timothy