Form textarea
Create multi-line text inputs with support for auto height sizing, minimum
and maximum number of rows, and contextual states.
<template>
<div>
<b-form-textarea id="textarea1"
v-model="text"
placeholder="Enter something"
:rows="3"
:max-rows="6">
</b-form-textarea>
<pre class="mt-3">{{ text }}</pre>
</div>
</template>
<script>
export default {
data () {
return {
text: ''
}
}
}
</script>
Displayed rows
<b-form-textarea>
automaticlly adjusts its height (text rows) to fit the content,
even as the user enters text. For a textarea with no content, the number of rows
starts at 1
.
To set the initial minimum height (in rows), set the rows
prop to the desired
number of lines. If no value is provided to rows
, then it will default to 1
.
To limit the maximum rows that the text area will grow to (before showing a scrollbar),
set the max-rows
prop to the maximum number of lines of text.
To keep the text-area at a set height, set both rows
and max-rows
to the same value.
Note: auto rows will only work when the user explicitly enters newlines in the textarea.
Disable resize
Note that some web browsers will allow the user to re-size the hight of the textarea.
To disable this, set the no-resize
prop to true
.
Contextual states
Bootstrap includes validation styles for valid
and invalid
states on most form controls.
Generally speaking, you’ll want to use a particular state for specific types of feedback:
'invalid'
(or false
) is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
'valid'
(or true
) is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
null
Displays no validation state
To apply one of the contextual state icons on <b-form-textarea>
, set the state
prop to:
'invalid'
or false
to apply invalid styling)
'valid'
or true
to apply valid highlighting,
null
for no validation contextual state
<template>
<b-form-textarea id="textarea2"
state="invalid"
v-model.trim="text"
placeholder="Enter something"
:rows="3"></b-form-textarea>
</template>
<script>
export default {
data () {
return {
text: ''
}
}
}
</script>
Conveying contextual state to assistive technologies and colorblind users
Using these contextual states to denote the state of a form control only provides a
visual, color-based indication, which will not be conveyed to users of assistive
technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you could
include a hint about state in the form control's <label>
text itself, or by providing
an additional help text block.
ARIA aria-invalid
attribute
When <b-form-textarea>
has an invalid contextual state (i.e. 'invalid'
or false
)
you may also want to set the prop aria-invalid
to true
, or one of hte supported values:
false
: No errors detected (default)
true
or 'true'
: The value has failed validation.
'grammar'
: A grammatical error has been detected.
'spelling'
A spelling error has been detected.
If the state
prop is set to false
(or 'invalid'
), and the aria-invalid
prop is
not explicity set, <b-form-textarea>
will automatically set the aria-invalid
attribute to 'true'
.
Readonly plain text
If you want to have <b-form-textarea readonly>
elements in your form styled as plain
text, set the plaintext
prop (no need to set readonly
) to remove the default form
field styling and preserve the correct margin and padding and height.
<template>
<b-form-textarea id="textarea3" plaintext :value="text"></b-form-textarea>
</template>
<script>
export default {
data () {
return {
text: 'This is some text.\nIt is read only and doesn\'t look like an input.'
}
}
}
</script>
Component alias
You can use <b-form-textarea>
by it's shorter alias <b-textarea>
.
Component reference
Importing Individual Components
Component | Import Path |
---|
<b-form-textarea> | bootstrap-vue/es/components/form-textarea/form-textarea |
Example:
import bFormTextarea from 'bootstrap-vue/es/components/form-textarea/form-textarea';
Vue.component('b-form-textarea', bFormTextarea);
Importing Form Textarea as a Vue plugin
This plugin includes all of the above listed individual
components.
Plugins also include any component aliases.
import { FormTextarea } from 'bootstrap-vue/es/components';
Vue.use(FormTextarea);