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="textarea"
v-model="text"
placeholder="Enter something..."
rows="3"
max-rows="6"
></b-form-textarea>
<pre class="mt-3 mb-0"></pre>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
}
}
</script>
Control sizing
Set text height using the size prop to sm or lg for small or large respectively.
To control width, place the input inside standard Bootstrap grid column.
<b-container fluid>
<b-row>
<b-col sm="2">
<label for="textarea-small">Small:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-small"
size="sm"
placeholder="Small textarea"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-default">Default:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-default"
placeholder="Default textarea"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-large">Large:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-large"
size="lg"
placeholder="Large textarea"
></b-form-textarea>
</b-col>
</b-row>
</b-container>
Displayed rows
To set the height of <b-form-textarea>, set the rows prop to the desired number of rows. If no value is provided to rows, then it will default to 2 (the browser default and minimum acceptable value). Setting it to null or a value below 2 will result in the default of 2 being used.
<div>
<b-form-textarea
id="textarea-rows"
placeholder="Tall textarea"
rows="8"
></b-form-textarea>
</div>
Disable resize handle
Some web browsers will allow the user to re-size the height of the textarea. To disable this feature, set the no-resize prop to true.
<div>
<b-form-textarea
id="textarea-no-resize"
placeholder="Fixed height textarea"
rows="3"
no-resize
></b-form-textarea>
</div>
Auto height
<b-form-textarea> can also automatically adjust its height (text rows) to fit the content, even as the user enters or deletes text. The height of the textarea will either grow or shrink to fit the content (grow to a maximum of max-rows or shrink to a minimum of rows).
To set the initial minimum height (in rows), set the rows prop to the desired number of lines (or leave it at the default of 2), And then set maximum rows that the text area will grow to (before showing a scrollbar) by setting the max-rows prop to the maximum number of lines of text.
To make the height sticky (i.e. never shrink), set the no-auto-shrink prop to true. The no-auto-shrink props has no effect if max-rows is not set or is equal to or less than rows.
Note that the resize handle of the textarea (if supported by the browser) will automatically be disabled in auto-height mode.
<b-container fluid>
<b-row>
<b-col sm="2">
<label for="textarea-auto-height">Auto height:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-auto-height"
placeholder="Auto height textarea"
rows="3"
max-rows="8"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mt-2">
<b-col sm="2">
<label for="textarea-no-auto-shrink">No auto-shrink:</label>
</b-col>
<b-col sm="10">
<b-form-textarea
id="textarea-no-auto-shrink"
placeholder="Auto height (no-shrink) textarea"
rows="3"
max-rows="8"
no-auto-shrink
></b-form-textarea>
</b-col>
</b-row>
</b-container>
Auto height implementation note
Auto-height works by computing the resulting height via CSS queries, hence the input has to be in document (DOM) and visible (not hidden via display: none). Initial height is computed on mount. If the browser client supports IntersectionObserver (either natively or via a polyfill), <b-form-textarea> will take advantage of this to determine when the textarea becomes visible and will then compute the height. Refer to the Browser support section on the getting started page.
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:
false (denotes invalid state) is great for when there's a blocking or required field. A user must fill in this field properly to submit the form.true (denotes valid state) 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 (neither valid nor invalid)To apply one of the contextual state icons on <b-form-textarea>, set the state prop to false (for invalid), true (for valid), or null (no validation state).
<template>
<div>
<b-form-textarea
id="textarea-state"
v-model="text"
:state="text.length >= 10"
placeholder="Enter at least 10 characters"
rows="3"
></b-form-textarea>
</div>
</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-invalid attribute
When <b-form-textarea> has an invalid contextual state (i.e. state is false) you may also want to set the prop aria-invalid to true, or one of the supported values:
false: No errors (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, and the aria-invalid prop is not explicitly set, <b-form-textarea> will automatically set the aria-invalid attribute to 'true'.
<b-form-textarea> optionally supports formatting by passing a function reference to the formatter prop.
Formatting (when a formatter function is supplied) occurs when the control's native input and change events fire. You can use the boolean prop lazy-formatter to restrict the formatter function to being called on the control's native blur event.
The formatter function receives two arguments: the raw value of the input element, and the native event object that triggered the format (if available).
The formatter function should return the formatted value as a string.
Formatting does not occur if a formatter is not provided.
<template>
<div>
<b-form-group
label="Textarea with formatter (on input)"
label-for="textarea-formatter"
description="We will convert your text to lowercase instantly"
class="mb-0"
>
<b-form-textarea
id="textarea-formatter"
v-model="text1"
placeholder="Enter your text"
:formatter="formatter"
></b-form-textarea>
</b-form-group>
<p style="white-space: pre-line"><b>Value:</b> </p>
<b-form-group
label="Textarea with lazy formatter (on blur)"
label-for="textarea-lazy"
description="This one is a little lazy!"
class="mb-0"
>
<b-form-textarea
id="textarea-lazy"
v-model="text2"
placeholder="Enter your text"
lazy-formatter
:formatter="formatter"
></b-form-textarea>
</b-form-group>
<p class="mb-0" style="white-space: pre-line"><b>Value:</b> </p>
</div>
</template>
<script>
export default {
data() {
return {
text1: '',
text2: ''
}
},
methods: {
formatter(value) {
return value.toLowerCase()
}
}
}
</script>
Note: With non-lazy formatting, if the cursor is not at the end of the input value, the cursor may jump to the end after a character is typed. You can use the provided event object and the event.target to access the native input's selection methods and properties to control where the insertion point is. This is left as an exercise for the reader.
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 as it will be set automatically) to remove the default form field styling and preserve the correct text size, margin, padding and height.
<template>
<div>
<b-form-textarea id="textarea-plaintext" plaintext :value="text"></b-form-textarea>
</div>
</template>
<script>
export default {
data() {
return {
text: "This is some text.\nIt is read only and doesn't look like an input."
}
}
}
</script>
v-model modifiers
Vue does not officially support .lazy, .trim, and .number modifiers on the v-model of custom component based inputs, and may generate a bad user experience. Avoid using Vue's native modifiers.
To get around this, <b-form-textarea> has three boolean props trim, number, and lazy which emulate the native Vue v-model modifiers .trim and .number and .lazy respectively. The lazy prop will update the v-model on change/blurevents.
Notes:
number prop takes precedence over the trim prop (i.e. trim will have no effect when number is set).number prop, and if the value can be parsed as a number (via parseFloat) it will return a value of type Number to the v-model, otherwise the original input value is returned as type String. This is the same behaviour as the native .number modifier.trim and number modifier props do not affect the value returned by the input or change events. These events will always return the string value of the content of <textarea> after optional formatting (which may not match the value returned via the v-model update event, which handles the modifiers).As an alternative to the lazy modifier prop, <b-form-textarea> optionally supports debouncing user input, updating the v-model after a period of idle time from when the last character was entered by the user (or a change event occurs). If the user enters a new character (or deletes characters) before the idle timeout expires, the timeout is re-started.
To enable debouncing, set the prop debounce to any integer greater than zero. The value is specified in milliseconds. Setting debounce to 0 will disable debouncing.
Note: debouncing will not occur if the lazy prop is set.
<template>
<div>
<b-form-textarea v-model="value" debounce="500" rows="3" max-rows="5"></b-form-textarea>
<pre class="mt-2 mb-0"></pre>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>
Autofocus
When the autofocus prop is set on <b-form-textarea>, the textarea will be auto-focused when it is inserted (i.e. mounted) into the document or re-activated when inside a Vue <keep-alive> component. Note that this prop does not set the autofocus attribute on the textarea, nor can it tell when the textarea becomes visible.
All native events (other than the custom input and change events) are supported, without the need for the .native modifier.
The custom input and change events receive a single argument of the current value (after any formatting has been applied), and are triggered by user interaction.
The custom update event is passed the input value, and is emitted whenever the v-model needs updating (it is emitted before input, change. and blur as needed).
You can always access the native input and change events by using the .native modifier.
<b-form-textarea> exposes several of the native input element's properties and methods on the component reference (i.e. assign a ref to your <b-form-textarea ref="foo" ...> and use this.$refs['foo'].propertyName or this.$refs['foo'].methodName(...)).
.selectionStart Read/Write .selectionEnd Read/Write .selectionDirection Read/Write .validity Read only .validationMessage Read only .willValidate Read only Input methods Method Notes .focus() Focus the input .blur() Remove focus from the input .select() Selects all text within the input .setSelectionRange() .setRangeText() .setCustomValidity() .checkValidity() .reportValidity()
Refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement for more information on these methods and properties. Support will vary based on input type.
Component reference<b-form-textarea> Component aliases <b-form-textarea> Properties <b-form-textarea> v-model <b-form-textarea> Events <b-form-textarea> can also be used via the following aliases:
<b-textarea>Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.
PropertiesAll property default values are globally configurable.
Property
(Click to sort ascending)Type
(Click to sort ascending)Default
Description
aria-invalid
Boolean or String false Sets the 'aria-invalid' attribute with the specified value autocomplete
String Sets the 'autocomplete' attribute value on the form control autofocus
Boolean false When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control debounce
Number or String 0 When set to a number of milliseconds greater than zero, will debounce the user input. Has no effect if prop 'lazy' is set disabled
Boolean false When set to `true`, disables the component's functionality and places it in a disabled state form
String ID of the form that the form control belongs to. Sets the `form` attribute on the control formatter
Function Reference to a function for formatting the textarea id
String Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed lazy
Boolean false When set, updates the v-model on 'change'/'blur' events instead of 'input'. Emulates the Vue '.lazy' v-model modifier lazy-formatter
Boolean false When set, the textarea is formatted on blur instead of each keystroke (if there is a formatter specified) max-rows
Number or String The maximum number of rows to show. When provided, the textarea will grow (or shrink) to fit the content up to maximum rows name
String Sets the value of the `name` attribute on the form control no-auto-shrink
Boolean false When set, prevents the auto height textarea from shrinking to fit the content no-resize
Boolean false When set, disabled the browser's resize handle which prevents the user from changing the height of the textarea. Automatically set when in auto height mode number
Boolean false When set attempts to convert the input value to a native number. Emulates the Vue '.number' v-model modifier placeholder
String Sets the `placeholder` attribute value on the form control plaintext
Boolean false Set the form control as readonly and renders the control to look like plain text (no borders) readonly
Boolean false Sets the `readonly` attribute on the form control required
Boolean false Adds the `required` attribute to the form control rows
Number or String 2 The minimum number of rows to display. Must be a value greater than 1 size
String Set the size of the component's appearance. 'sm', 'md' (default), or 'lg' state
Boolean null Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state trim
Boolean false When set, trims any leading and trailing white space from the input value. Emulates the Vue '.trim' v-model modifier value
Number or String '' The current value of the textarea. Result will always be a string, except when the 'number' prop is used wrap
String 'soft' The value to place on the textarea's 'wrap' attribute. Controls how line break are returned v-model
Property
Event
value update Events
Event
Arguments
Description
blur
event - Native blur event (before any optional formatting occurs)change
value - Current value of the textareainput
value - Current value of textareaupdate
value - Value of textarea, after any formatting. Not emitted if the value does not changeYou can import individual components into your project via the following named exports:
Component
Named Export
Import Path
<b-form-textarea> BFormTextarea bootstrap-vue
Example:
import { BFormTextarea } from 'bootstrap-vue'
Vue.component('b-form-textarea', BFormTextarea) Importing as a Vue.js plugin
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
Named Export
Import Path
FormTextareaPlugin bootstrap-vue
Example:
import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4