Text Area in material-ui

Question

Could someone help me making a TextField personalization into a TextArea, using material-ui library? I am not finding any parameter that should personalize it into a TextArea: https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts

This is the TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F 'Text area').

Text areas are taller than text fields and wrap overflow text onto a new line. They scroll vertically when the cursor reaches the bottom of the field.

score 180 · Answer 1 · edited Dec 10 '21 at 10:22

180

To make TextField work like a textarea you can use multiline prop. You can read more about TextFied and its props here.

Example

<TextField
  placeholder="MultiLine with rows: 2 and rowsMax: 4"
  multiline
  rows={2}
  maxRows={4}
/>

You can set maxRows={Infinity} if you want to scale your multiline input box with your content (regardless of the content length).

edited Dec 10 '21 at 10:22

Bakuriu

98,325
22
197
231

answered Sep 24 '17 at 19:50

bennygenel

23,896
6
65
78

1

@BishopZ it is hard to say what is the problem without a [mcve]. – bennygenel Jun 23 '18 at 10:09
19

Tip: You can set `rowsMax={Infinity}` if you want to scale your multiline input box with your content (regardless of the content length). – Benny Code Jan 11 '19 at 13:39
But the inner text of the `TextField` is basically getting smaller in size. Do we have to override it with the custom css ? – Rehan Sattar May 17 '19 at 20:36
actually the properties are named minRows and maxRows (not rowsMax and rowsMin). By default without specifying these properties it will grow to fit the text. – RollingInTheDeep Oct 06 '21 at 14:33
[New link to the docs](https://mui.com/api/text-field/) It should be the accepted answer. – sr9yar Nov 04 '21 at 08:16
You cannot use the *minRows* or *maxRows* props when the input *rows* is set. – Mathew O'Sullivan Jan 09 '22 at 14:34

Sampath kumar · Answer 2 · 2021-08-10T12:58:39.553

We can use outlined multiline <TextField> for text area
and it could be implemented by creating a theme to apply globally anywhere inside <App/>

theme.js

import { createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
 overrides: {
    MuiOutlinedInput: {
        multiline: {
            fontWeight: 'bold',
            fontSize: '20px',
            color: 'purple',
            width: '50vw'
        }
    }
}
  
});
export default theme;

app.js

...
import { ThemeProvider } from '@material-ui/core/styles';
import Theme from './relevant-path-where-the-above-theme.js-file-is-saved/Theme';
...
...
render() {
    
    return (
      <ThemeProvider theme={Theme}>
        <div className="App"> 
            <Routes/>
        </div>
      </ThemeProvider>
        
    );
  }

SomeComponent.js

...
<TextField
  id="outlined-multiline-static"
  label="Multiline"
  multiline
  rows={10}
  variant="outlined"
/>
...

Now the style for outlined multiline <TextField> will be applied globally

score 5 · Answer 3 · edited Sep 24 '21 at 10:53

5

You should use TextareaAutosize API available in material UI.

import TextareaAutosize from '@material-ui/core/TextareaAutosize';

or

import { TextareaAutosize } from '@material-ui/core';

The following example has all the attributes of TextareaAutosize: https://material-ui.com/components/textarea-autosize/

You can learn more about the difference between the two imports by reading this guide.

edited Sep 24 '21 at 10:53

Duke

3,226
1
18
23

answered Aug 30 '19 at 07:23

Rishav Kumar

71
1
3

21

but does not look like a material at all – tasqyn Jun 16 '20 at 08:16
5

do you have any idea how to use this component with a `InputBase` in order to have same style and theme – irzhy Feb 23 '21 at 12:55
2

Instead of TextareaAutosize, which looks like garbage, set these attributes on a TextField: `multiline minRows={3} maxRows={20}, eg: . multiline = textarea, maxRows = autosize up to this many rows, optional minRows = minimum rows to use. – Jake Oct 08 '21 at 16:37

score 1 · Answer 4 · answered Jun 28 '21 at 14:43

If you want something simple instead of the whole material-ui component, just use this code:

textarea.style.height = textarea.scrollHeight+'px'

Where scrollHeight is inner height of textarea and style.height is outer (if outer < inner, scrollbar shows)

Text Area in material-ui

4 Answers4

theme.js

app.js

SomeComponent.js