Skip to main content
codeFork me on GitHub favoriteMade by Daemon & djibe

Textarea autosize

Multi-line text fields grow to accommodate multiple lines of text.

Multi-line text fields show all user input at once. Overflow text causes the text field to expand (shifting screen elements downward), and text wraps onto a new line.

These fields initially appear as single-line fields, which is useful for compact layouts that need to be able to accomodate large amounts of text.

Material Design guidelines: Text-fields - Input types Material Components for the web: Text Field textarea-autosize: Official documentation

Stylesheet material-plugins.css is required.

jQuery is required.

Basic demo

<div class="form-group form-ripple-bottom my-3">
  <textarea class="form-control textarea-autosize" id="textareaExample" rows="1" placeholder="Try this textarea"></textarea>
</div>

Using Textarea Autosize

Import material-plugins.css after Material CSS.

<link href="https://cdn.jsdelivr.net/gh/djibe/material@4.6.2-1.0/css/material-plugins.min.css" rel="stylesheet" crossorigin>

Import Textarea-autosize.js after Material JavaScript.

<script src="https://cdn.jsdelivr.net/npm/textarea-autosize@0.4.2/dist/jquery.textarea_autosize.min.js" integrity="sha256-gtPvsaPR4MtUbbjtrvMNO4AojMEHF9v00dkeQZ5SqQw=" crossorigin></script>

Add textarea-autosize class to your textarea AND set rows="1".

<textarea class="form-control textarea-autosize" id="textareaExample" rows="1" placeholder="Try this textarea"></textarea>

Initialize plugin once.

$('.textarea-autosize').textareaAutoSize()

All parameters are detailed in official documentation.

That’s it.

More examples

event 
<div class="textfield-box form-ripple-bottom my-2">
  <textarea class="form-control textarea-autosize" id="textareaExampleField" rows="1" placeholder="Try this textarea with textfield box"></textarea>
</div>
<div class="form-group form-ripple-bottom">
  <textarea class="form-control form-control-lg textarea-autosize" id="textareaExampleBig" rows="1" placeholder="Try this big textarea"></textarea>
</div>
<div class="form-group form-ripple-bottom">
  <textarea class="form-control form-control-sm textarea-autosize" id="textareaExampleSmall" rows="1" placeholder="Try this small textarea"></textarea>
</div>
<div class="form-group floating-label form-ripple-bottom">
  <label for="floating">Textarea with floating label</label>
  <textarea class="form-control textarea-autosize" id="floating" rows="1"></textarea>
</div>
<div class="form-group floating-label floating-label-sm form-ripple-bottom">
  <label for="floating-sm">Small textarea with floating label</label>
  <textarea class="form-control form-control-sm textarea-autosize" id="floating-sm" rows="1"></textarea>
</div>
<div class="form-group">
  <div class="input-group">
    <div class="floating-label form-ripple-bottom">
      <label for="floating-icon">Input icon + floating label + textarea autosize</label>
      <textarea class="form-control textarea-autosize" id="floating-icon" rows="1"></textarea>
    </div>
    <span class="input-group-icon">
      <i class="material-icons">event</i>
    </span>
  </div>
</div>