Angular Bootstrap Textarea

Angular Textarea - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections and forums.

Textareas don't have to be boring. They can be enhanced with colors, shadows or rounded corners.

Examples of Angular Bootstrap textarea use include:

  • Comment sections
  • Forms
  • Forums

See the following Angular Bootstrap textarea examples:

Material textarea

<!--Basic textarea-->
<div class="md-form">
  <textarea type="text" id="form7" class="md-textarea form-control" mdbInput></textarea>
  <label for="form7">Basic textarea</label>
</div>
<!--Textarea with icon prefix-->
<div class="md-form">
  <mdb-icon fas icon="pencil-alt" class="prefix"></mdb-icon>
  <textarea type="text" id="form8" class="md-textarea form-control" mdbInput></textarea>
  <label for="form8">Icon Prefix</label>
</div>

Auto resizing textarea

<div class="md-form">
  <textarea type="text" id="form7" class="md-textarea md-textarea-auto form-control" mdbInput></textarea>
  <label for="form7">Auto resizing textarea</label>
</div>

Textarea within forms MDB Pro component

Info notification

MDB has many forms to use together with a textarea. Take a look here to learn all the possibilities.

Contact Us

Contact Us

<!-- Section: form gradient -->
<section class="form-gradient mb-5">
  <!--Form with header-->
  <mdb-card>
    <!--Header-->
    <div class="header peach-gradient">
      <div class="row d-flex justify-content-center">
        <h3 class="white-text mb-0 py-5 font-weight-bold">Contact Us</h3>
      </div>
    </div>
    <!--Header-->
    <mdb-card-body class="mx-4">
      <div class="md-form">
        <mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
        <input type="text" id="form104" class="form-control" mdbInput>
        <label for="form104">Your name</label>
      </div>
      <div class="md-form">
        <mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
        <input type="text" id="form105" class="form-control" mdbInput>
        <label for="form105">Your email</label>
      </div>
      <div class="md-form">
        <mdb-icon fas icon="tag" class="prefix grey-text"></mdb-icon>
        <input type="text" id="form106" class="form-control" mdbInput>
        <label for="form106">Subject</label>
      </div>
      <div class="md-form">
        <mdb-icon fas icon="pencil-alt" class="prefix grey-text"></mdb-icon>
        <textarea type="text" id="form107" class="md-textarea form-control" rows="5" mdbInput></textarea>
        <label for="form107">Your message</label>
      </div>
      <!--Grid row-->
      <div class="row d-flex align-items-center mb-3 mt-4">
        <!--Grid column-->
        <div class="col-md-12">
          <div class="text-center">
            <button type="button" mdbBtn color="grey" rounded="true" class="z-depth-1a">Send</button>
          </div>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
    </mdb-card-body>
  </mdb-card>
  <!--/Form with header-->
</section>
<!-- Section: form gradient -->
<!-- Section: form dark -->
<section class="form-dark mb-5">
  <!--Form without header-->
  <mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp')">
    <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
      <!--Header-->
      <div class="text-center">
        <h3 class="white-text mb-5 mt-4 font-weight-bold text-uppercase">
          <strong>Contact</strong>
          <a class="green-text font-weight-bold">
            <strong> Us</strong>
          </a>
        </h3>
      </div>
      <div class="md-form">
        <input type="text" id="form100" class="form-control" mdbInput>
        <label for="form100">Your name</label>
      </div>
      <div class="md-form">
        <input type="text" id="form101" class="form-control" mdbInput>
        <label for="form101">Your email</label>
      </div>
      <div class="md-form">
        <input type="text" id="form102" class="form-control" mdbInput>
        <label for="form102">Subject</label>
      </div>
      <div class="md-form">
        <textarea type="text" id="form103" class="md-textarea form-control" rows="5" mdbInput></textarea>
        <label for="form103">Your message</label>
      </div>
      <!--Grid row-->
      <div class="row d-flex align-items-center">
        <!--Grid column-->
        <div class="text-center col-md-12 mt-3 mb-2">
          <button type="button" mdbBtn color="success" rounded="true" block="true" class="z-depth-1">Send</button>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
    </div>
  </mdb-card>
  <!--/Form without header-->
</section>
<!-- Section: form dark -->
.form-gradient .header {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
}
.form-gradient input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #fd9267;
  box-shadow: 0 1px 0 0 #fd9267;
}
.form-gradient input[type=text]:focus:not([readonly]) + label {
  color: #4f4f4f;
}
.form-gradient textarea.md-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #fd9267;
  box-shadow: 0 1px 0 0 #fd9267;
}
.form-dark .md-form label {
  color: #fff;
}
.form-dark input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-box-shadow: 0 1px 0 0 #00C851;
  box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=text]:focus:not([readonly]) + label {
  color: #fff;
}
.form-dark textarea.md-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  box-shadow: 0 1px 0 0 #00C851;
  color: #fff;
}
.form-dark textarea.md-textarea {
  color: #fff;
}
.form-dark .form-control, .form-dark .form-control:focus {
  color: #fff;
}

Angular Textarea - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of textarea component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Textarea:
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md';
Import example Modules list

Angular Textarea - examples & customization

Material textarea with colorful border

<!--Material textarea-->
<div class="md-form mb-4 pink-textarea active-pink-textarea">
  <textarea type="text" id="form18" class="md-textarea form-control" mdbInput></textarea>
  <label for="form18">Material textarea colorful on :focus state</label>
</div>

<!--Material textarea-->
<div class="md-form amber-textarea active-amber-textarea">
  <textarea type="text" id="form19" class="md-textarea form-control" mdbInput></textarea>
  <label for="form19">Material textarea colorful on :focus state</label>
</div>
<!--Basic textarea-->
<div class="md-form mb-4 pink-textarea active-pink-textarea-2">
  <textarea type="text" id="form17" class="md-textarea form-control" mdbInput></textarea>
  <label for="form17">Material textarea always colorful</label>
</div>

<!--Basic textarea-->
<div class="md-form amber-textarea active-amber-textarea-2">
  <textarea type="text" id="form16" class="md-textarea form-control" mdbInput></textarea>
  <label for="form16">Material textarea always colorful</label>
</div>
.pink-textarea textarea.md-textarea:focus:not([readonly]) {
   border-bottom: 1px solid #f48fb1;
   box-shadow: 0 1px 0 0 #f48fb1;
 }
 .active-pink-textarea.md-form label.active {
   color: #f48fb1;
 }
 .amber-textarea textarea.md-textarea:focus:not([readonly]) {
   border-bottom: 1px solid #ffa000;
   box-shadow: 0 1px 0 0 #ffa000;
 }
 .active-amber-textarea.md-form label.active {
   color: #ffa000;
 }
 .active-pink-textarea-2 textarea.md-textarea {
   border-bottom: 1px solid #f48fb1;
   box-shadow: 0 1px 0 0 #f48fb1;
 }
 .active-pink-textarea-2.md-form label.active {
   color: #f48fb1;
 }
 .active-pink-textarea-2.md-form label {
   color: #f48fb1;
 }
 .active-amber-textarea-2 textarea.md-textarea {
   border-bottom: 1px solid #ffa000;
   box-shadow: 0 1px 0 0 #ffa000;
 }
.active-amber-textarea-2.md-form label.active {
   color: #ffa000;
 }
 .active-amber-textarea-2.md-form label {
   color: #ffa000;
 }