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>
              <div class="form-group">
                <label for="exampleFormControlTextarea1">Basic textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
              </div>
            </template>
          

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 - 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" />

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>