diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index ec0b5d0cec4..9e1453d7e4e 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -29,30 +29,59 @@ export default {
 <!-- form-textarea-1.vue -->
 ```
 
-## Displayed rows
+## Control sizing
+Set text height using the `size` prop to `sm` or `lg` for small or large respectively.
 
-`<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 control width, place the input inside standard Bootstrap grid column.
 
-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`.
+```html
+<b-container fluid>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-small">Small:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-small" size="sm" type="text" placeholder="Small Textarea"></b-form-textarea>
+    </b-col>
+  </b-row>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-default">Default:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-default" type="text" placeholder="Default Textarea"></b-form-text-area>
+    </b-col>
+  </b-row>
+  <b-row class="my-1">
+    <b-col sm="2"><label for="input-large">Large:</label></b-col>
+    <b-col sm="10">
+      <b-form-textarea id="input-large" size="lg" type="text" placeholder="Large Textarea"></b-form-textarea>
+    </b-col>
+  </b-row>
+</b-container>
+
+<!-- form-textarea-size-1.vue -->
+```
 
-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.
+## 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.
 
-**Note:** auto rows will only work when the user explicitly enters newlines in the textarea.
+### 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`.
 
-### Disable resize
+### Auto height
+`<b-form-textarea>` can also automatically adjust its height (text rows) to fit the content,
+even as the user enters text.
 
-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`.
+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`).
 
+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.
 
-## Contextual states
 
+## Textarea 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:
@@ -61,16 +90,16 @@ Generally speaking, you’ll want to use a particular state for specific types o
 - `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,
+- The string `'invalid'` or Boolean `false` to apply invalid styling
+- The string `'valid'` or Boolean `true` to apply valid styling
 - `null` for no validation contextual state
 
 ```html
 <template>
   <b-form-textarea id="textarea2"
-                   state="invalid"
+                   :state="text.length >= 10"
                    v-model.trim="text"
-                   placeholder="Enter something"
+                   placeholder="Enter at least 10 characters"
                    :rows="3"></b-form-textarea>
 </template>
 
@@ -88,7 +117,6 @@ export default {
 ```
 
 ### 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.
@@ -98,11 +126,10 @@ include a hint about state in the form control's `<label>` text itself, or by pr
 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)
+- `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.
@@ -112,11 +139,16 @@ not explicity set, `<b-form-textarea>` will automatically set the `aria-invalid`
 attribute to `'true'`.
 
 
-## Readonly plain text
+## Formatter support
+Refer to the (`<b-form-input>`)[../form-input] documentation regarding usage of the
+optional formatter feature.
+
 
+## 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.
+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.
 
 ```html
 <template>
@@ -136,5 +168,69 @@ export default {
 <!-- form-textarea-plaintext.vue -->
 ```
 
+## 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-for-textarea>` and `<b-form-input>` have two boolean props `trim` and `number`
+which emulate the native Vue `v-model` modifiers `.trim` and `.number` respectivley. Emulation of the
+`.lazy` modifier is _not_ supported (listen for `change` or `blur` events instead).
+
+**Notes:**
+- The `number` prop takes precedence over the `trim` prop (i.e. `trim` will have no effect when `number` is set).
+- When using the `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.
+- The `trim` and `number` modifier props do not affect the value returned by the `input` or `change` events. These events will aways 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).
+
+
+## Native and custom events
+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 triggerd by user interaction.
+
+The custom `update` event is passed the input value, and is emitted wehenever 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.
+
+
+## Exposed input properties and methods
+`<b-form-input>` exposes several of the native input element's properties and methods on the 
+component reference (i.e. assign a `ref` to your `<b-form-input ref="foo" ...>` and
+use `this.$refs['foo'].propertyName` or `this.$refs['foo'].methodName(...)`).
+
+### Input Properties
+
+| Property | Notes
+| -------- | -----
+| `.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 alias
+You can use `<b-form-textarea>` by it's shorter alias `<b-textarea>`.
+
 
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/form-textarea/fixtures/form-textarea.html b/src/components/form-textarea/fixtures/form-textarea.html
deleted file mode 100644
index bd510c2397d..00000000000
--- a/src/components/form-textarea/fixtures/form-textarea.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div id="app">
-  <!-- default -->
-  <b-form-textarea ref="default" v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-
-  <!-- rows and max-rows -->
-  <b-form-textarea ref="rows" :rows="4" :max-rows="10"v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-
-  <!-- state -->
-  <b-form-textarea ref="invalid" state="invalid" v-model="text" placeholder="Type something">
-  </b-form-textarea>
-  <br><br>
-  
-  <!-- value -->
-  <b-form-textarea ref="value" v-model="value">
-  </b-form-textarea>
-  <br><br>
- 
-</div>
diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 62bfa649985..c02615503fc 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -2,77 +2,70 @@ import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
 import formSizeMixin from '../../mixins/form-size'
 import formStateMixin from '../../mixins/form-state'
+import formTextMixin from '../../mixins/form-text'
+import formSelectionMixin from '../../mixins/form-selection'
+import formValidityMixin from '../../mixins/form-validity'
+import { getCS, isVisible } from '../../utils/dom'
 
 export default {
-  mixins: [idMixin, formMixin, formSizeMixin, formStateMixin],
+  mixins: [
+    idMixin,
+    formMixin,
+    formSizeMixin,
+    formStateMixin,
+    formTextMixin,
+    formSelectionMixin,
+    formValidityMixin
+  ],
   render (h) {
+    // Using self instead of this helps reduce code size during minification
+    const self = this
     return h('textarea', {
       ref: 'input',
-      class: this.inputClass,
-      style: this.inputStyle,
+      class: self.computedClass,
+      style: self.computedStyle,
       directives: [
         {
           name: 'model',
           rawName: 'v-model',
-          value: this.localValue,
+          value: self.localValue,
           expression: 'localValue'
         }
       ],
-      domProps: { value: this.value },
       attrs: {
-        id: this.safeId(),
-        name: this.name,
+        id: self.safeId(),
+        name: self.name,
         form: this.form || null,
-        disabled: this.disabled,
-        placeholder: this.placeholder,
-        required: this.required,
-        autocomplete: this.autocomplete || null,
-        readonly: this.readonly || this.plaintext,
-        rows: this.rowsCount,
-        wrap: this.wrap || null,
-        'aria-required': this.required ? 'true' : null,
-        'aria-invalid': this.computedAriaInvalid
+        disabled: self.disabled,
+        placeholder: self.placeholder,
+        required: self.required,
+        autocomplete: self.autocomplete || null,
+        readonly: self.readonly || self.plaintext,
+        rows: self.computedRows,
+        wrap: self.wrap || null,
+        'aria-required': self.required ? 'true' : null,
+        'aria-invalid': self.computedAriaInvalid
+      },
+      domProps: {
+        value: self.localValue
       },
       on: {
-        input: (evt) => {
-          this.localValue = evt.target.value
-        }
+        ...self.$listeners,
+        input: self.onInput,
+        change: self.onChange,
+        blur: self.onBlur
       }
     })
   },
   data () {
     return {
-      localValue: this.value
+      dontResize: true
     }
   },
   props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    ariaInvalid: {
-      type: [Boolean, String],
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    plaintext: {
-      type: Boolean,
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
     rows: {
       type: [Number, String],
-      default: null
+      default: 2
     },
     maxRows: {
       type: [Number, String],
@@ -84,69 +77,88 @@ export default {
       default: 'soft'
     },
     noResize: {
+      // Disable the resize handle of textarea
       type: Boolean,
       default: false
     }
   },
+  mounted () {
+    // Enable opt-in resizing once mounted
+    this.$nextTick(() => { this.dontResize = false })
+  },
+  activated () {
+    // If we are being re-activated in <keep-alive>, enable opt-in resizing
+    this.$nextTick(() => { this.dontResize = false })
+  },
+  deactivated () {
+    // If we are in a deactivated <keep-alive>, disable opt-in resizing
+    this.dontResize = true
+  },
+  beforeDestroy () {
+    this.dontResize = true
+  },
   computed: {
-    rowsCount () {
-      // A better option could be based on https://codepen.io/vsync/pen/frudD
-      // As linebreaks aren't added until the input is submitted
-      const rows = parseInt(this.rows, 10) || 1
-      const maxRows = parseInt(this.maxRows, 10) || 0
-      const lines = (this.localValue || '').toString().split('\n').length
-      return maxRows
-        ? Math.min(maxRows, Math.max(rows, lines))
-        : Math.max(rows, lines)
-    },
-    inputClass () {
-      return [
-        this.plaintext ? 'form-control-plaintext' : 'form-control',
-        this.sizeFormClass,
-        this.stateClass
-      ]
-    },
-    inputStyle () {
-      // We set width 100% in plaintext mode to get around a shortcoming in bootstrap CSS
-      // setting noResize to true will disable the ability for the user to resize the textarea
+    computedStyle () {
       return {
-        width: this.plaintext ? '100%' : null,
-        resize: this.noResize ? 'none' : null
+        // setting noResize to true will disable the ability for the user to
+        // resize the textarea. We also disable when in auto resize mode
+        resize: (!this.computedRows || this.noResize) ? 'none' : null,
+        // The computed height for auto resize
+        height: this.computedHeight
       }
     },
-    computedAriaInvalid () {
-      if (!this.ariaInvalid || this.ariaInvalid === 'false') {
-        // this.ariaInvalid is null or false or 'false'
-        return this.computedState === false ? 'true' : null
-      }
-      if (this.ariaInvalid === true) {
-        // User wants explicit aria-invalid=true
-        return 'true'
-      }
-      // Most likely a string value (which could be the string 'true')
-      return this.ariaInvalid
-    }
-  },
-  watch: {
-    value (newVal, oldVal) {
-      // Update our localValue
-      if (newVal !== oldVal) {
-        this.localValue = newVal
-      }
+    computedMinRows () {
+      // Ensure rows is at least 2 and positive (2 is the native textarea value)
+      return Math.max(parseInt(this.rows, 10) || 2, 2)
     },
-    localValue (newVal, oldVal) {
-      // update Parent value
-      if (newVal !== oldVal) {
-        this.$emit('input', newVal)
+    computedMaxRows () {
+      return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0)
+    },
+    computedRows () {
+      return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
+    },
+    computedHeight () /* istanbul ignore next: can't test getComputedProperties */ {
+      const el = this.$el
+
+      if (this.isServer) {
+        return null
       }
-    }
-  },
-  methods: {
-    focus () {
-      // For external handler that may want a focus method
-      if (!this.disabled) {
-        this.$el.focus()
+      // We compare this.localValue to null to ensure reactivity of content changes.
+      if (this.localValue === null || this.computedRows || this.dontResize || this.$isServer) {
+        return null
       }
+
+      // Element must be visible (not hidden) and in document. *Must* be checked after above.
+      if (!isVisible(el)) {
+        return null
+      }
+
+      // Remember old height and reset it temporarily
+      const oldHeight = el.style.height
+      el.style.height = 'auto'
+
+      // Get current computed styles
+      const computedStyle = getCS(el)
+      // Height of one line of text in px
+      const lineHeight = parseFloat(computedStyle.lineHeight)
+      // Minimum height for min rows (browser dependant)
+      const minHeight = parseInt(computedStyle.height, 10) || (lineHeight * this.computedMinRows)
+      // Calculate height of content
+      const offset = (parseFloat(computedStyle.borderTopWidth) || 0) +
+                     (parseFloat(computedStyle.borderBottomWidth) || 0) +
+                     (parseFloat(computedStyle.paddingTop) || 0) +
+                     (parseFloat(computedStyle.paddingBottom) || 0)
+      // Calculate content height in "rows"
+      const contentRows = (el.scrollHeight - offset) / lineHeight
+      // Put the old height back (needed when new height is equal to old height!)
+      el.style.height = oldHeight
+      // Calculate number of rows to display (limited within min/max rows)
+      const rows = Math.min(Math.max(contentRows, this.computedMinRows), this.computedMaxRows)
+      // Calulate the required height of the textarea including border and padding (in pixels)
+      const height = Math.max(Math.ceil((rows * lineHeight) + offset), minHeight)
+
+      // return the new computed height in px units
+      return `${height}px`
     }
   }
 }
diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js
index d38c49b111f..2879d5fdf37 100644
--- a/src/components/form-textarea/form-textarea.spec.js
+++ b/src/components/form-textarea/form-textarea.spec.js
@@ -1,6 +1,874 @@
-import {loadFixture, testVM} from '../../../tests/utils'
+import Textarea from './form-textarea'
+import { mount } from '@vue/test-utils'
 
 describe('form-textarea', async () => {
-  beforeEach(loadFixture(__dirname, 'form-textarea'))
-  testVM()
+  it('root element is textarea', async () => {
+    const input = mount(Textarea)
+    expect(input.element.type).toBe('textarea')
+  })
+
+  it('does not have attribute disabled by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('disabled')).not.toBeDefined()
+  })
+
+  it('has attribute disabled when disabled=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(input.attributes('disabled')).toBeDefined()
+  })
+
+  it('does not have attribute readonly by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('readonly')).not.toBeDefined()
+  })
+
+  it('has attribute readonly when readonly=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        readonly: true
+      }
+    })
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  it('inherits non-prop attributes', async () => {
+    const input = mount(Textarea, {
+      attrs: {
+        foo: 'bar'
+      }
+    })
+    expect(input.attributes('foo')).toBeDefined()
+    expect(input.attributes('foo')).toBe('bar')
+  })
+
+  it('has class form-control by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).toContain('form-control')
+  })
+
+  it('does not have class form-control-plaintext by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('form-control-plaintext')
+  })
+
+  it('does not have size classes by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('form-control-sm')
+    expect(input.classes()).not.toContain('form-control-lg')
+  })
+
+  it('has size class when size prop is set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        size: 'sm'
+      }
+    })
+    expect(input.classes()).toContain('form-control-sm')
+    input.setProps({ size: 'lg' })
+    expect(input.classes()).toContain('form-control-lg')
+    input.setProps({ size: 'foobar' })
+    expect(input.classes()).toContain('form-control-foobar')
+    input.setProps({ size: '' })
+    expect(input.classes()).not.toContain('form-control-')
+  })
+
+  it('has class form-control-plaintext when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.classes()).toContain('form-control-plaintext')
+  })
+
+  it('does not have class form-control when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.classes()).not.toContain('form-control')
+  })
+
+  it('has attribute readonly when plaintext=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        plaintext: true
+      }
+    })
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  it('has user supplied id', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        id: 'foobar'
+      }
+    })
+    expect(input.attributes('id')).toBe('foobar')
+  })
+
+  it('does not have is-valid or is-invalid classes by default', async () => {
+    const input = mount(Textarea)
+    expect(input.classes()).not.toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-valid when state=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: true
+      }
+    })
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-valid when state=valid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'valid'
+      }
+    })
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
+  it('has class is-invalid when state=false', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: false
+      }
+    })
+    expect(input.classes()).toContain('is-invalid')
+    expect(input.classes()).not.toContain('is-valid')
+  })
+
+  it('has class is-invalid when state=invalid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'invalid'
+      }
+    })
+    expect(input.classes()).toContain('is-invalid')
+    expect(input.classes()).not.toContain('is-valid')
+  })
+
+  it('does not have aria-invalid attribute by default', async () => {
+    const input = mount(Textarea)
+    expect(input.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('does not have aria-invalid attribute when state=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: true
+      }
+    })
+    expect(input.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('does not have aria-invalid attribute when state=valid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'valid'
+      }
+    })
+    expect(input.contains('[aria-invalid]')).toBe(false)
+  })
+
+  it('has aria-invalid attribute when state=false', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: false
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
+  it('has aria-invalid attribute when state=invalid', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        state: 'invalid'
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
+  it('has aria-invalid attribute when aria-invalid=true', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        ariaInvalid: true
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('true')
+    input.setProps({ ariaInvalid: 'true' })
+    expect(input.attributes('aria-invalid')).toBe('true')
+  })
+
+  it('has aria-invalid attribute when aria-invalid="spelling"', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        ariaInvalid: 'spelling'
+      }
+    })
+    expect(input.attributes('aria-invalid')).toBe('spelling')
+  })
+
+  it('does not emit an update event on mount when value not set', async () => {
+    const input = mount(Textarea)
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('does mot emit an update event on mount when value is set and no formatter', async () => {
+    const input = mount(Textarea, {
+      value: 'foobar'
+    })
+    expect(input.emitted('update')).not.toBeDefined()
+  })
+
+  it('emits an input event with single arg of value', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input')[0].length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('test')
+  })
+
+  it('emits an change event with single arg of value', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    // Need to trigger an input event before change can be emitted
+    input.trigger('input')
+    expect(input.emitted('change')).not.toBeDefined()
+
+    input.trigger('change')
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change')[0].length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('test')
+  })
+
+  it('emits an update event with one arg on input', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update')[0].length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+  })
+
+  it('does not emit an update event on change when value not changed', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    input.trigger('change')
+    expect(input.emitted('update').length).toEqual(1)
+  })
+
+  it('emits an update event with one arg on change when input text changed', async () => {
+    const input = mount(Textarea)
+
+    input.element.value = 'test'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    input.element.value = 'TEST'
+    input.trigger('change')
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('TEST')
+  })
+
+  it('does not emit an update, input or change event when value prop changed', async () => {
+    const input = mount(Textarea, {
+      value: ''
+    })
+
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    input.setProps({value: 'test'})
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+  })
+
+  it('emits a native focus event', async () => {
+    const spy = jest.fn()
+    const input = mount(Textarea, {
+      listeners: {
+        focus: spy
+      }
+    })
+    input.trigger('focus')
+    expect(input.emitted('focus')).not.toBeDefined()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('emits a blur event when blurred', async () => {
+    const input = mount(Textarea)
+    input.trigger('blur')
+    expect(input.emitted('blur')).toBeDefined()
+  })
+
+  it('has attribute rows set to 2 by default', async () => {
+    const input = mount(Textarea)
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+  })
+
+  it('has attribute rows when rows set and max-rows not set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 10
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+    // should work with both text and number values
+    input.setProps({ rows: '20' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('20')
+    // Should use minimum value of 2 when rows is set less than 2
+    input.setProps({ rows: '1' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+    input.setProps({ rows: -10 })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('2')
+  })
+
+  it('has attribute rows set when rows and max-rows are equal', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 5,
+        maxRows: 5
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('5')
+    // should work with both text and number values
+    input.setProps({ rows: '10', maxRows: '10' })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+  })
+
+  it('does not have rows set when rows and max-rows set', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 2,
+        maxRows: 5
+      }
+    })
+    expect(input.attributes('rows')).not.toBeDefined()
+  })
+
+  it('has attribute rows set when max-rows less than rows', async () => {
+    const input = mount(Textarea, {
+      propsData: {
+        rows: 10,
+        maxRows: 5
+      }
+    })
+    expect(input.attributes('rows')).toBeDefined()
+    expect(input.attributes('rows')).toEqual('10')
+  })
+
+  it('does not have style resize by default', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('does not have style resize when no-resize is set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        noResize: true
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('none')
+  })
+
+  it('does not have style resize when max-rows not set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 10
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('does not have style resize when max-rows less than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 10,
+        maxRows: 5
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toEqual('')
+  })
+
+  it('has style resize:none when max-rows greater than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 5
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.resize).toBeDefined()
+    expect(input.element.style.resize).toEqual('none')
+  })
+
+  it('does not have style height by default', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  it('does not have style height when rows and max-rows equal', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 2
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  it('does not have style height when max-rows not set', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 5
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).toEqual('')
+  })
+
+  /*
+
+  // The height style calculations do not work in JSDOM environment
+  // But we do know auto height works in browser from manual testing
+
+  it('has style height when max-rows greater than rows', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        rows: 2,
+        maxRows: 5
+      }
+    })
+    await input.vm.$nextTick()
+
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+  })
+
+  it('auto height should work', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        rows: 2,
+        maxRows: 10
+      }
+    })
+    expect(input.element.style).toBeDefined()
+    expect(input.element.style.height).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+    const firstHeight = parseFloat(input.element.style.height)
+    // Set content to five lines heigh
+    input.element.value = 'one\n two\n three\n four\n five'
+    input.trigger('input')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.element.style.height).not.toEqual('')
+    const secondHeight = parseFloat(input.element.style.height)
+    expect(secondHeight).toBeGreaterThan(firstHeight)
+    // Set content to one lines heigh
+    input.element.value = 'one'
+    input.trigger('input')
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.element.style.height).not.toEqual('')
+    const thirdHeight = parseFloat(input.element.style.height)
+    expect(thirdHeight).toBeLessThan(secondHeight)
+  })
+  */
+
+  it('Formats on input when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    // Update event fires first with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    // Followed by an input event with formatted value
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('test')
+    // And no change event
+    expect(input.emitted('change')).not.toBeDefined()
+  })
+
+  it('Formats on change when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    input.element.value = 'TEST'
+    input.trigger('change')
+
+    // Update event fires first with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('test')
+    // Followed by a change event with formatted value
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('test')
+    // And no input event
+    expect(input.emitted('input')).not.toBeDefined()
+  })
+
+  it('Formats on blur when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        formatter (value) {
+          return value.toLowerCase()
+        },
+        lazyFormatter: true
+      }
+    })
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    // Update event fires first
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // followed by an input
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    expect(input.vm.localValue).toEqual('TEST')
+
+    input.trigger('change')
+    // Update does not fire again
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    // Event change emitted
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('TEST')
+    expect(input.vm.localValue).toEqual('TEST')
+
+    input.trigger('blur')
+
+    // Update fires before change with formatted value
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('test')
+    // Followed by blur event with native event
+    expect(input.emitted('blur')).toBeDefined()
+    expect(input.emitted('blur')[0][0] instanceof Event).toBe(true)
+    expect(input.emitted('blur')[0][0].type).toEqual('blur')
+
+    // Expected number of events from above sequence
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('blur').length).toEqual(1)
+    expect(input.emitted('update').length).toEqual(2)
+  })
+
+  it('Does not format value on mount when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: 'TEST',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
+  })
+
+  it('Does not format value on mount when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: 'TEST',
+        formatter (value) {
+          return value.toLowerCase()
+        },
+        lazyFormatter: true
+      }
+    })
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
+  })
+
+  it('Does not format on prop "value" change when not lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        }
+      }
+    })
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('')
+    input.setProps({ value: 'TEST' })
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
+  })
+
+  it('Does not format on value prop change when lazy', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        formatter (value) {
+          return value.toLowerCase()
+        },
+        lazyFormatter: true
+      }
+    })
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('')
+    input.setProps({ value: 'TEST' })
+    // Does not emit any events
+    expect(input.emitted('update')).not.toBeDefined()
+    expect(input.emitted('input')).not.toBeDefined()
+    expect(input.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
+  })
+
+  it('activate and deactivate hooks work (keepalive)', async () => {
+    const Keepalive = {
+      template: '<div><keep-alive>' +
+                '<b-form-textarea ref="textarea" v-if="show" v-model="value"></b-form-textarea>' +
+                '<p v-else></p>' +
+                '</keep-alive></div>',
+      components: { bFormTextarea: Textarea },
+      props: { show: true },
+      data () { return { value: '' } }
+    }
+
+    const keepalive = mount(Keepalive, {
+      attachToDocument: true,
+      propsData: {
+        show: true
+      }
+    })
+
+    expect(keepalive).toBeDefined()
+
+    const textarea = keepalive.find(Textarea)
+    expect(textarea).toBeDefined()
+    expect(textarea.isVueInstance()).toBe(true)
+
+    // Check that the internal dontResize flag is now false
+    await keepalive.vm.$nextTick()
+    expect(textarea.vm.dontResize).toEqual(false)
+
+    // v-if the component out of document
+    keepalive.setProps({ show: false })
+    // Check that the internal dontResize flag is now true
+    await keepalive.vm.$nextTick()
+    expect(textarea.vm.dontResize).toEqual(true)
+
+    // v-if the component out of document
+    keepalive.setProps({ show: true })
+    // Check that the internal dontResize flag is now false
+    await keepalive.vm.$nextTick()
+    expect(textarea.vm.dontResize).toEqual(false)
+  })
+
+  it('trim modifier prop works', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        trim: true
+      }
+    })
+    expect(input.vm.localValue).toEqual('')
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+
+    input.element.value = 'TEST  '
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(2)
+    expect(input.emitted('input')[1][0]).toEqual('TEST  ')
+
+    input.element.value = '  TEST  '
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3)
+    expect(input.emitted('update')[2][0]).toEqual('TEST')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(3)
+    expect(input.emitted('input')[2][0]).toEqual('  TEST  ')
+
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3) // not emitted because no change in value
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(4)
+    expect(input.emitted('input')[3][0]).toEqual('  TEST  ')
+
+    input.trigger('change')
+
+    expect(input.vm.localValue).toEqual('  TEST  ')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3) // not emitted because no change in value
+    expect(input.emitted('change')).toBeDefined()
+    expect(input.emitted('change').length).toEqual(1)
+    expect(input.emitted('change')[0][0]).toEqual('  TEST  ')
+  })
+
+  it('number modifier prop works', async () => {
+    const input = mount(Textarea, {
+      attachToDocument: true,
+      propsData: {
+        value: '',
+        number: true
+      }
+    })
+    expect(input.vm.localValue).toEqual('')
+
+    input.element.value = 'TEST'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('TEST')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(1)
+    expect(input.emitted('update')[0][0]).toEqual('TEST')
+    expect(typeof input.emitted('update')[0][0]).toEqual('string')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(1)
+    expect(input.emitted('input')[0][0]).toEqual('TEST')
+    expect(typeof input.emitted('input')[0][0]).toEqual('string')
+
+    input.element.value = '123.45'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('123.45')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(2)
+    expect(input.emitted('update')[1][0]).toEqual(123.45)
+    expect(typeof input.emitted('update')[1][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(2)
+    expect(input.emitted('input')[1][0]).toEqual('123.45')
+    expect(typeof input.emitted('input')[1][0]).toEqual('string')
+
+    input.element.value = '0123.450'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('0123.450')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(3)
+    expect(input.emitted('update')[2][0]).toEqual(123.45)
+    expect(typeof input.emitted('update')[2][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(3)
+    expect(input.emitted('input')[2][0]).toEqual('0123.450')
+    expect(typeof input.emitted('input')[2][0]).toEqual('string')
+
+    input.element.value = '0123 450'
+    input.trigger('input')
+
+    expect(input.vm.localValue).toEqual('0123 450')
+    expect(input.emitted('update')).toBeDefined()
+    expect(input.emitted('update').length).toEqual(4)
+    expect(input.emitted('update')[3][0]).toEqual(123)
+    expect(typeof input.emitted('update')[3][0]).toEqual('number')
+    expect(input.emitted('input')).toBeDefined()
+    expect(input.emitted('input').length).toEqual(4)
+    expect(input.emitted('input')[3][0]).toEqual('0123 450')
+    expect(typeof input.emitted('input')[3][0]).toEqual('string')
+  })
 })
diff --git a/src/components/form-textarea/package.json b/src/components/form-textarea/package.json
index d2033172828..57390c216f2 100644
--- a/src/components/form-textarea/package.json
+++ b/src/components/form-textarea/package.json
@@ -8,11 +8,41 @@
     "events": [
       {
         "event": "input",
-        "description": "Emitted when the textarea receives input from user.",
+        "description": "Input event triggered by user interaction. Emitted after any formatting and after the v-model is updated",
         "args": [
           {
             "arg": "value",
-            "description": "current value of the textarea"
+            "description": "Current value of textarea"
+          }
+        ]
+      },
+      {
+        "event": "change",
+        "description": "Change event triggerd by user interaction. Emitted after any formatting and after the v-model is updated.",
+        "args": [
+          {
+            "arg": "value",
+            "description": "Current value of the textarea"
+          }
+        ]
+      },
+      {
+        "event": "update",
+        "description": "Emitted to update the v-model",
+        "args": [
+          {
+            "arg": "value",
+            "description": "Value of textarea, after any formatting. Not emitted if the value does nto change"
+          }
+        ]
+      },
+      {
+        "event": "blur",
+        "description": "Emitted after the textarea looses focus",
+        "args": [
+          {
+            "arg": "event",
+            "description": "Native blur event (before any formmating)"
           }
         ]
       }
diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
new file mode 100644
index 00000000000..d7e1437c5a8
--- /dev/null
+++ b/src/mixins/form-text.js
@@ -0,0 +1,174 @@
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    ariaInvalid: {
+      type: [Boolean, String],
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    plaintext: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    formatter: {
+      type: Function,
+      value: null
+    },
+    trim: {
+      type: Boolean,
+      default: false
+    },
+    number: {
+      type: Boolean,
+      default: false
+    },
+    lazyFormatter: {
+      type: Boolean,
+      value: false
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'update'
+  },
+  data () {
+    return {
+      localValue: this.stringifyValue(this.value)
+    }
+  },
+  watch: {
+    value (newVal, oldVal) {
+      if (newVal !== oldVal && newVal !== this.localValue) {
+        this.localValue = this.stringifyValue(newVal)
+      }
+    }
+  },
+  mounted () {
+    const value = this.stringifyValue(this.value)
+    if (value !== this.localValue) {
+      this.localValue = value
+    }
+  },
+  computed: {
+    computedClass () {
+      return [
+        this.plaintext ? 'form-control-plaintext' : 'form-control',
+        {
+          // Special class cases for b-form-input input types
+          'custom-range': this.type === 'range',
+          // plaintext not supported by type=range or type=color
+          'form-control-plaintext': this.plaintext && this.type !== 'range' && this.type !== 'color',
+          // form-control not used by type=range or plaintext. Always used by type=color
+          'form-control': (!this.plaintext && this.type !== 'range') || this.type === 'color'
+        },
+        this.sizeFormClass,
+        this.stateClass
+      ]
+    },
+    computedAriaInvalid () {
+      if (!this.ariaInvalid || this.ariaInvalid === 'false') {
+        // this.ariaInvalid is null or false or 'false'
+        return this.computedState === false ? 'true' : null
+      }
+      if (this.ariaInvalid === true) {
+        // User wants explicit aria-invalid=true
+        return 'true'
+      }
+      // Most likely a string value (which could be the string 'true')
+      return this.ariaInvalid
+    }
+  },
+  methods: {
+    stringifyValue (value) {
+      return (value === null || typeof value === 'undefined') ? '' : String(value)
+    },
+    getFormatted (value, event, force = false) {
+      value = this.stringifyValue(value)
+      if ((!this.lazyFormatter || force) && typeof this.formatter === 'function') {
+        value = this.formatter(value, event)
+      }
+      return value
+    },
+    updateValue (value) {
+      value = this.stringifyValue(value)
+      if (this.localValue !== value) {
+        // keep the input set to the value before modifiers
+        this.localValue = value
+        if (this.number) {
+          // Emulate .number modifier behaviour
+          const num = parseFloat(value)
+          value = isNaN(num) ? value : num
+        } else if (this.trim) {
+          // Emulate .trim modifier behaviour
+          value = value.trim()
+        }
+        // Update the v-model
+        this.$emit('update', value)
+      }
+    },
+    onInput (evt) {
+      // evt.target.composing is set by Vue
+      // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
+      if (evt.target.composing) {
+        return
+      }
+      const formatted = this.getFormatted(evt.target.value, evt)
+      if (formatted === false || evt.defaultPrevented) {
+        return
+      }
+      this.updateValue(formatted)
+      this.$emit('input', formatted)
+    },
+    onChange (evt) {
+      // evt.target.composing is set by Vue
+      // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
+      if (evt.target.composing) {
+        return
+      }
+      const formatted = this.getFormatted(evt.target.value, evt)
+      if (formatted === false) {
+        return
+      }
+      this.updateValue(formatted)
+      this.$emit('change', formatted)
+    },
+    onBlur (evt) {
+      // lazy formatter
+      if (this.lazyFormatter) {
+        const formatted = this.getFormatted(evt.target.value, evt, true)
+        if (formatted === false) {
+          return
+        }
+        this.updateValue(formatted)
+      }
+      // Emit native blur event
+      this.$emit('blur', evt)
+    },
+    focus () {
+      // For external handler that may want a focus method
+      if (!this.disabled) {
+        this.$el.focus()
+      }
+    },
+    blur () {
+      // For external handler that may want a blur method
+      if (!this.disabled) {
+        this.$el.blur()
+      }
+    }
+  }
+}