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