web
mobile
Edit these docs Rate these docs

Vue Bootstrap textarea

Vue Textarea - Bootstrap 4 & Material Design

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./p>

MDB Textarea value

MDB Textarea uses $emit inside component. To handle input value changes use @input event instead of v-model.


Default textarea

Default styling for Bootstrap Textarea component


            <template>
              <mdb-input outline type="textarea" rows="5" />
            </template>
          

            <script>
              import { mdbInput } from 'mdbvue';
              export default {
                components: {
                  mdbInput
                }
              }
            </script>
          

Material textarea

Material Design styling for Bootstrap Textarea component


            <template>
              <mdb-input type="textarea" label="Material textarea" :rows="5"/>
            </template>
          

            <script>
              import { mdbInput } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbInput
                }
              }
            </script>
          

Icon prefixes

You can add icons to your textarea. Just use prop icon with icon name.

Default textarea


              <template>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon">
                      <i class="fas fa-pencil-alt prefix"></i>
                    </span>
                  </div>
                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
                </div>
              </template>
            

Material input


            <template>
              <mdb-input type="textarea" @input="handleInput" id="exampleInput" label="Icon Prefix" icon="pencil" />
            </template>
          

            <script>
              import { mdbInput } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbInput
                }
              }
            </script>
          

Textarea with a colorful border

With our textarea you can use different types of colors to customize your textarea.

Also, please check out our documentation about colors.

Default textarea


            <template>
              <mdb-row class="align-items-center">
                <mdb-col sm="6">
                  <mdb-input
                    type="textarea"
                    outline
                    wrapperClass="custom-purple-border"
                    placeholder="aways colorful"
                  />
                </mdb-col>
                <mdb-col sm="6">
                  <mdb-input
                    type="textarea"
                    outline
                    wrapperClass="custom-green-border"
                    placeholder="colorful on focus"
                  />
                </mdb-col>
              </mdb-row>
            </template>
          

            <script>
              import { mdbInput, mdbRow, mdbCol } from 'mdbvue';
              export default {
                components: {
                  mdbInput,
                  mdbRow,
                  mdbCol
                }
              }
            </script>
          

            <style>
              .custom-purple-border textarea {
                border: 1px solid #ba68c8 !important;
              }
              .custom-purple-border .form-control:focus {
                border: 1px solid #ba68c8 !important;
                box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, 0.25) !important;
              }

              .custom-green-border .form-control:focus {
                border: 1px solid #8bc34a !important;
                box-shadow: 0 0 0 0.2rem rgba(139, 195, 74, 0.25) !important;
              }
            </style>
          

Material textarea


            <template>
              <mdb-container>
                <mdb-row class="align-items-end">
                  <mdb-col sm="6">
                    <mdb-input
                      wrapperClass="pink-textarea"
                      type="textarea"
                      label="Pink textarea"
                    />
                  </mdb-col>
                  <mdb-col sm="6">
                    <mdb-input
                      wrapperClass="active-pink-textarea"
                      type="textarea"
                      label="Active pink textarea"
                    />
                  </mdb-col>
                </mdb-row>
                <mdb-row class="align-items-end">
                  <mdb-col sm="6">
                    <mdb-input
                      wrapperClass="amber-textarea"
                      type="textarea"
                      label="Amber textarea"
                    />
                  </mdb-col>
                  <mdb-col sm="6">
                    <mdb-input
                      wrapperClass="active-amber-textarea"
                      type="textarea"
                      label="Active amber textarea"
                    />
                  </mdb-col>
                </mdb-row>
              </mdb-container>
            </template>
          

            <script>
              import { mdbInput, mdbRow, mdbCol, mdbContainer } from 'mdbvue';
              export default {
                components: {
                  mdbInput,
                  mdbRow,
                  mdbCol,
                  mdbContainer
                }
              }
            </script>
          

            <style>
              .pink-textarea.md-form label.active {
                color: #f48fb1;
              }

              .pink-textarea textarea.md-textarea:focus:not([readonly]),
              .active-pink-textarea textarea.md-textarea:focus:not([readonly]) {
                border-bottom: 1px solid #f48fb1;
                box-shadow: 0 1px 0 0 #f48fb1;
              }
              .pink-textarea.md-form .prefix.active {
                color: #f48fb1;
              }
              .pink-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
                color: #f48fb1;
              }

              .amber-textarea.md-form label.active {
                color: #ffa000;
              }
              .amber-textarea textarea.md-textarea:focus:not([readonly]),
              .active-amber-textarea textarea.md-textarea:focus:not([readonly]) {
                border-bottom: 1px solid #ffa000;
                box-shadow: 0 1px 0 0 #ffa000;
              }
              .amber-textarea.md-form .prefix.active {
                color: #ffa000;
              }
              .amber-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
                color: #ffa000;
              }

              .active-pink-textarea textarea.md-textarea {
                border-bottom: 1px solid #f48fb1;
                box-shadow: 0 1px 0 0 #f48fb1;
              }
              .active-pink-textarea.md-form label.active {
                color: #f48fb1;
              }
              .active-pink-textarea.md-form label {
                color: #f48fb1;
              }
              .active-pink-textarea.md-form .prefix {
                color: #f48fb1;
              }
              .active-pink-textarea.md-form
                textarea.md-textarea:focus:not([readonly])
                + label {
                color: #f48fb1;
              }

              .active-amber-textarea textarea.md-textarea {
                border-bottom: 1px solid #ffa000;
                box-shadow: 0 1px 0 0 #ffa000;
              }
              .active-amber-textarea.md-form label.active {
                color: #ffa000;
              }
              .active-amber-textarea.md-form label {
                color: #ffa000;
              }
              .active-amber-textarea.md-form .prefix {
                color: #ffa000;
              }
              .active-amber-textarea.md-form
                textarea.md-textarea:focus:not([readonly])
                + label {
                color: #ffa000;
              }
            </style>
          

Textarea with shadow and placeholder


        <template>
            <mdb-input
            type="textarea"
            outline
            inputClass="z-depth-1 p-3"
            placeholder="shadow textarea"
          />
        </template>
      

        <script>
          import { mdbInput } from 'mdbvue';
          export default {
            components: {
              mdbInput
            }
          }
        </script>
      

Material textarea with a colorful prefix


        <template>
          <mdb-container>
              <mdb-row class="align-items-end">
                <mdb-col sm="6">
                  <mdb-input
                    wrapperClass="pink-textarea"
                    type="textarea"
                    label="Material textarea with a colorful prefix on :focus state"
                    icon="angle-double-right"
                  />
                </mdb-col>
                <mdb-col sm="6">
                  <mdb-input
                    icon="pencil-alt"
                    wrapperClass="active-pink-textarea"
                    type="textarea"
                    label="Material textarea with an always colorful prefix"
                  />
                </mdb-col>
              </mdb-row>
              <mdb-row class="mt-3 align-items-end">
                <mdb-col sm="6">
                  <mdb-input
                    wrapperClass="amber-textarea"
                    type="textarea"
                    label="Material textarea with a colorful prefix on :focus state"
                    icon="angle-double-right"
                  />
                </mdb-col>
                <mdb-col sm="6">
                  <mdb-input
                    icon="pencil-alt"
                    wrapperClass="active-amber-textarea"
                    type="textarea"
                    label="Material textarea with an always colorful prefix"
                  />
                </mdb-col>
              </mdb-row>
          </mdb-container>
        </template>
      

        <script>
          import { mdbInput, mdbRow, mdbCol, mdbContainer } from 'mdbvue';
          export default {
            components: {
              mdbInput,
              mdbRow,
              mdbCol,
              mdbContainer
            }
          }
        </script>
      

        <style>
          .pink-textarea.md-form label.active {
            color: #f48fb1;
          }

          .pink-textarea textarea.md-textarea:focus:not([readonly]),
          .active-pink-textarea textarea.md-textarea:focus:not([readonly]) {
            border-bottom: 1px solid #f48fb1;
            box-shadow: 0 1px 0 0 #f48fb1;
          }
          .pink-textarea.md-form .prefix.active {
            color: #f48fb1;
          }
          .pink-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
            color: #f48fb1;
          }

          .amber-textarea.md-form label.active {
            color: #ffa000;
          }
          .amber-textarea textarea.md-textarea:focus:not([readonly]),
          .active-amber-textarea textarea.md-textarea:focus:not([readonly]) {
            border-bottom: 1px solid #ffa000;
            box-shadow: 0 1px 0 0 #ffa000;
          }
          .amber-textarea.md-form .prefix.active {
            color: #ffa000;
          }
          .amber-textarea.md-form textarea.md-textarea:focus:not([readonly]) + label {
            color: #ffa000;
          }

          .active-pink-textarea textarea.md-textarea {
            border-bottom: 1px solid #f48fb1;
            box-shadow: 0 1px 0 0 #f48fb1;
          }
          .active-pink-textarea.md-form label.active {
            color: #f48fb1;
          }
          .active-pink-textarea.md-form label {
            color: #f48fb1;
          }
          .active-pink-textarea.md-form .prefix {
            color: #f48fb1;
          }
          .active-pink-textarea.md-form
            textarea.md-textarea:focus:not([readonly])
            + label {
            color: #f48fb1;
          }

          .active-amber-textarea textarea.md-textarea {
            border-bottom: 1px solid #ffa000;
            box-shadow: 0 1px 0 0 #ffa000;
          }
          .active-amber-textarea.md-form label.active {
            color: #ffa000;
          }
          .active-amber-textarea.md-form label {
            color: #ffa000;
          }
          .active-amber-textarea.md-form .prefix {
            color: #ffa000;
          }
          .active-amber-textarea.md-form
            textarea.md-textarea:focus:not([readonly])
            + label {
            color: #ffa000;
          }
        </style>
      
Edit these docs Rate these docs

Textarea - API

In this section you will find advanced information about the Textarea component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


        import { mdbTextarea } from 'mdbvue'; // OR import { mdbInput } from
        'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
class String Override or extend the styles applied to the component. <mdb-textarea class="example-class" ... />
disabled Boolean false Disables input component <mdb-textarea disabled ... />
id String The id of the input element. Required <mdb-textarea required ... />
icon String Adds icon on the left site of the input <mdb-textarea icon="pencil" ... />
label String Add description to the component label <mdb-textarea label="Example label" ... />
name String Add name of the input element <mdb-textarea name="name" ... />
placeholder String Add content to the component placeholder <mdb-textarea placeholder="Example placeholder" ... />
required Boolean false Determines that the input has to have value <mdb-textarea required ... />

API Reference: Methods

Name Parameters Description Example
v-on:input value Returns input value. Use this method instead of v-model to handle input value changes. <mdb-textarea @input="hanelOnInput" />
v-on:focus e Emitted on input's native focus event, meaning when the field gains focus. <mdb-input @focus="onFocus" />
v-on:blur e Emitted on input's native blur event, meaning when the field looses focus. <mdb-input @blur="onBlur" />
Edit these docs Rate these docs

Textarea - examples & customization


A form within a card

Sign up


        <template>
          <card>
            <card-body>
              <card-title class="text-center">Sign up</card-title>
              <form class="grey-text">
                <mdb-input type="text" @input="handleInput" id="name" label="Your name" icon="user" />
                <mdb-input type="email" @input="handleInput" id="email" label="Your email" icon="envelope" />
                <mdb-input type="text" @input="handleInput" id="message" label="Your message" icon="pencil" />
              </form>
              <div class="text-center py-4 mt-3">
                <btn color="cyan">Send Message</btn>
              </div>
            </card-body>
          </card>
        </template>
      

        <script>
          import { mdbInput, Card, CardBody, CardTitle, Btn, mdbTextarea } from "mdbvue";

          export default {
            name: "CardForm",
            components: {
              Btn,
              Card,
              CardBody,
              CardTitle,
              mdbInput,
              mdbTextarea
            },
            methods: {
              handleInput(val) {
                console.log(val);
              }
            }
          }
        </script>