Textarea

Textarea#

The default material design texterea is a simple but modern underlined input design.
Initially, our textareas are not resizable horizontally, and the max and min heights are defined.
To change it, you can use rows="" attribute. 

<form class="form-material">
  <div class="form-field">
    <label for="textarea">Textarea</label>
    <textarea type="text" id="textarea" class="form-control" /></textarea>
  </div>
</form>

Material design variant#

Use the material design variant with the .form-material-bordered class to get a bordered input design. 

<form class="form-material form-material-bordered">
  <div class="form-field">
    <label for="textarea">Textarea</label>
    <textarea type="text" id="textarea" class="form-control rounded-1" /></textarea>
  </div>
</form>

Disabled textarea#

To get a disabled textarea, just add the disabled attribute to your <textarea> tag. 

<form class="form-material">
  <div class="form-field">
    <label for="textarea">Textarea</label>
    <textarea disabled type="text" id="textarea" class="form-control" /></textarea>
  </div>
</form>

Basic textarea#

Without the material-form class set, the textarea design becomes classic and gets a shadow once focused. 

<form>
  <div class="form-field">
    <label for="textarea">Textarea</label>
    <textarea type="text" id="textarea" class="form-control" /></textarea>
  </div>
</form>

Common methods & styling#

For all the common methods and styling properties, please refer to the Material forms page.