To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add a text area.
Text Area
We can add a text area to a form to let us add multiline text inputs.
It can support auto height sizing, minimum and maximum number of rows, and displaying validation states.
To add one, we use the b-form-textarea component.
For instance, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" rows="3" max-rows="6"></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
We added the b-form-textarea input box.
v-model binds text to the inputted value.
placeholder has the placeholder.
rows is set to 3, but we can enter up to 6 rows of text with the max-rows .
The entered value is displayed.
Sizing
We can change the size of the input.
To change the size, we can use the size prop.
For example, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" size="sm"></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
to shrink the text area.
The possible values are 'sm' or 'lg' . 'sm' is for small. 'lg' is for large.
Displayed Rows
We can change the rows with the rows prop.
For example, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" rows="8"></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
then we have 8 rows in our text area.
Disable Resize
The no-resize prop disables the resizing of the text area.
For instance, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" rows="3" no-resize></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
The no-resize prop disables the resize handle.
Auto Height
By default, the b-form-textarea will adjust its height to fit the content.
We can use the no-auto-shrink prop to disable shrinking if the inputted rows are reduced.
sticky will make it never shrink.
For instance, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" rows="3" max-rows="8" no-auto-shrink></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
Validation States
We can set the state prop to display the validation state of the input.
For instance, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" :state="text.length >= 5"></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
We have the state prop that checks if text ‘s length is bigger than or equal to 5 for it to be considered valid.
The box is displayed in red if it’s invalid.
Otherwise, it’s displayed in green.
Text Formatter
We can format the inputted text the way we want.
To do that, we can set the formatter prop.
For instance, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" :formatter="formatter"></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
},
methods: {
formatter(value) {
return value.toUpperCase();
}
}
};
</script>
We have the formatter method to return the text turned upper case.
Make the Text Area Display as Plain Text
The plaintext prop makes the text area display as plain text.
For example, we can write:
<template>
<div id="app">
<b-form-textarea v-model="text" placeholder="Enter text" plaintext></b-form-textarea>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ""
};
}
};
</script>
Now we don’t have the border displayed.
Make it Read Only
The readonly prop makes it read-only.
Conclusion
We can use the b-form-textarea to add a text area to our app.
It can be customized in various, like changing the size or display it as plain text.
