Vue Bootstrap textarea

Vue 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

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

Use following code to add shadow and placeholder to textarea.

        
            
      <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

Add color to textarea 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>

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

        
            
    <script>
      import {
        mdbTextarea
      } from 'mdbvue'; // OR import { mdbInput } from 'mdbvue';
    </script>

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>