Vue MDBootstrap

Appearance

TextArea Field ​

BsTextArea is a form field component that let users enter a large amounts of text into an UI.

Overview ​

BsTextArea component mimics the HTML5 <textarea> element. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property as in v-model="myText".

IMPORTANT

Do not use the model-value property when using v-model.

Style Variants ​

You can style <bs-text-area> to your own preference or use a style variant based on Google Material Design 2 or Material Design 3 specifications.

Default ​

You can style <bs-text-area> that follows Google Material Design 2 specifications by using floating-label property explicitly.

Filled ​

Use filled property explicitly to enable <bs-text-area> with solid fill style. And when combined with floating-label property, <bs-text-area> will have a style that follows the Google Material Design 3 specifications.

Outlined ​

Use outlined property explicitly to enable <bs-text-area> with outline style. And when combined with floating-label property, <bs-text-area> will have a style that follows the Google Material Design 3 specifications.

Browser Autocomplete ​

The autocomplete property gives you the option to enable browser to predict the user input.

Clearable ​

Define the clear-button property explicitly, so that the field value can be cleared easily.

Adjusting Height ​

Auto Grow ​

<bs-text-area> can be set to automatically adjust its height to fit the content, even as the user enters or deletes text. The height of the <textarea> element will either grow or shrink to fit the content.

Fixed Height ​

<bs-text-area> can also have a fixed height. Sets the row-height property to the desired number of pixels, and the component will have a fixed height.

Displayed Rows ​

The height of <bs-text-area> can also be set using the rows property to the desired number of rows. If no value is provided then it will default to 2.

Disabling Resize Handle ​

Some web browsers will allow the user to re-size the height of the <textarea> element. To disable this feature, explicitly define the no-resize property.

Help Text ​

The help-text property on <bs-text-area> adds an help text beneath the TextArea field. And define the persistent-help-off property explicitly to make the help text visible only when the TextArea field is focused.

Updated in v2.2.0
Enter your profile information
Enter your profile information
Enter your profile information

Icons ​

The properties prepend-icon, prepend-icon-outer, append-icon and append-icon-outer provides the ability to add icon to <bs-text-area>.

Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon style variant.

INFO

Since v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Usage Example ​

The following is an example that demonstrate more advanced use of the <bs-text-area> with form validation.

CSS Variables ​

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-field and global CSS variables for better customization.

Updated in v2.2.0
scss
.md-field {
  --md-field-border-width: 1px;
  --md-field-border-color: #{colors.$gray-400};
  --md-field-border-radius: #{vars.$text-field-border-radius};
  --md-field-hover-border-color: currentColor;
  --md-field-active-border-width: 2px;
  --md-field-active-border-color: var(--md-field-active-indicator);
  --md-field-color-bg: currentColor;

  --md-field-outline-bg: transparent;
  --md-field-outline-hover-bg: transparent;
  --md-field-outline-focus-bg: transparent;
  --md-field-outline-border-radius: var(--md-field-border-radius);

  --md-field-control-height: #{vars.$text-field-height};
  --md-field-label-color: currentColor;
  --md-field-label-font-weight: var(--font-weight-medium);
  --md-field-inline-text-font-weight: var(--font-weight-medium);
  --md-field-floating-label-color: var(--md-field-label-color);

  --md-field-padding-start: #{vars.$text-field-padding-start};
  --md-field-padding-end: #{vars.$text-field-padding-end};
  --md-field-padding-top: #{vars.$text-field-padding-top};
  --md-field-padding-bottom: #{vars.$text-field-padding-bottom};
  --md-field-classic-padding-top: #{vars.$text-field-classic-padding-top};
  --md-field-classic-padding-bottom: #{vars.$text-field-classic-padding-bottom};
}
css
:root {
  --md-field-primary-indicator: oklch(0.458 0.23 304.441);
  --md-field-accent-indicator: oklch(0.743 0.102 303.276);
  --md-field-active-indicator: var(--md-field-primary-indicator);
  --md-field-disabled-opacity: 0.4;
  --md-field-readonly-opacity: 0.55;
}

API Reference ​

TValidator ​

The validator configuration option has properties as described below:

PropertyTypeDescription
validatorsRecord<String, Boolean>External validator plugin validation result.
messagesRecord<String, Boolean>Validation message for each validation types.
hasErrorBooleanAn indicator that tells the field value pass the validation or not.
dirtyBooleanValue comes from validator plugin that indicate the field is dirty or not.

All properties are mandatory.

NOTE

Vue MDBootstrap does not include form validation by default, we leave that up to the 3rd party form validation plugin. As of now, Vuelidate has been fully tested with our component library.

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar