How to create TextArea in Material-UI?

Check out the course on Material-UI at Watch the course trailer at

Full Transcript

Hey! This is Deeksha from Bonsaiilabs and today's video will cover how can you create a TextArea using Material-UI <TextField> component.

We have the codesandbox ready. I bootstrapped a React project and already have the Material-UI dependency. I removed the template code that came with it.

Let's add the TextField component with variant outlined. Also add a placeholder prop with value Write awesome things about yourself. Now whenever you need to transform a Material-UI component or customize it, the first thing you should do is check their API to see what is already provided as a prop. Can you make use of that first?

We will navigate to TextField API and if you scroll further down, you should see this multliine prop that can help you turn the textfield into textarea.

Two other important props you can make use of are rows and rowsMax where rows with a numeric value allows you decide how big your textarea should look when its displayed on the screen.

rowsMax also takes a numeric value. This is the maximum number of lines your user can enter into the textarea.

If you are using TextField with multiline property, these two props are handy. Let's go back to our code and add those.

Now you can see you simply turned this TextField into a TextArea which you can use to get the user details on site or app.

That's all I wanted to cover in this video. I will see you in the next video.