diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
index dc0faff832b..577911266be 100755
--- a/src/components/form-input/README.md
+++ b/src/components/form-input/README.md
@@ -75,7 +75,7 @@ as two separate inputs.
 than what is returned by it's value (i.e. ordering of year-month-date).
 - Regardless of input type, the value is **always** returned as a string representation.
 - `v-model.lazy` is not supported by `<b-form-input>` (nor any custom vue component).
-- `v-model` modifiers `.number` and `.trim` can cause unexpected cursor jumps when the user is typing (this is a Vue issue with `v-model` on custom components). Avoid using these modifiers.
+- `v-model` modifiers `.number` and `.trim` can cause unexpected cursor jumps when the user is typing (this is a Vue issue with `v-model` on custom components). _Avoid using these modifiers_.
 - Older version of firefox may not support `readonly` for `range` type inputs.
 - Input types that do not support `min`, `max` and `step` (i.e. `text`, `password`, `tel`, `email`, `url`, etc) will silently ignore these values (although they will still be rendered on the input markup).
 
@@ -135,7 +135,7 @@ export default {
 
 **Note:** Range inputs (as do all input types) return their value as a string. You may
 need to convert the value to a native number by using `Number(value)`, `parseInt(value, 10)`,
-`parseFloat(value)`, or use the `.number` modifier on the `v-model`.
+`parseFloat(value)`, or use the `number` prop.
 
 **Note:** Bootsttrap V4.1 CSS does not include styling for range inputs inside input groups,
 nor validation styling on range inputs. However, Bootstrap-Vue includes custom styling to handle
@@ -192,8 +192,8 @@ Generally speaking, you’ll want to use a particular state for specific types o
 
 To apply one of the contextual state icons on `<b-form-input>`, set the `state` prop
 to:
-- `'invalid'` or `false` for invalid contextual state
-- `'valid'` or `true` for the valid contextual state
+- The string `'invalid'` or boolean `false` for invalid contextual state
+- The string `'valid'` or boolean `true` for the valid contextual state
 - `null` for no validation contextual state (default)
 
 ```html
@@ -291,19 +291,17 @@ then the `aria-invalid` attribute on the input will automatically be set to `'tr
 
 
 ## Formatter support
-`<b-form-input>` optionally supports formatting by passing a function reference to
+`<b-form-input>` and `<b-form-textarea>` optionally supports formatting by passing a function reference to
 the `formatter` prop.
 
-Formatting (when a formatter funtion is supplied) occurs when the control's native `input`
-event fires. You can use the boolean prop `lazy-formatter` to restrict the formatter
-function to being called on the control's native `change` event (which usually occurs on blur).
+Formatting (when a formatter funtion 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 (if available). If the formatter is triggered during a
-`v-model` update (or by running the component `.format()` method), then the event argument
-will be `null`.
+and the native `event` object that triggered teh format (if available).
 
-The `formatter` function should return the formatted value (as a string).
+The `formatter` function should return the formatted value as a _string_.
 
 Formatting does not occur if a `formatter` is not provided.
 
@@ -322,7 +320,7 @@ Formatting does not occur if a `formatter` is not provided.
     </b-form-text>
     <p>Value: {{ text1 }}</p>
 
-    <label for="inputLazy">Text input with lazy formatter (on change)</label>
+    <label for="inputLazy">Text input with lazy formatter (on blur)</label>
     <b-form-input id="inputLazy"
                   v-model="text2"
                   type="text"
@@ -374,20 +372,40 @@ field styling and preserve the correct margin and padding.
 
 The `plaintext` option is not supported by input types `color` or `range`.
 
+
 ## Disabling mousewheel events on numeric-like inputs
 On some browsers, scrolling the mousewheel while a numeric-like input is focused will
 increment or decrement the input's value. To disable this browser feture, just set
 the `no-wheel` prop to `true`.
 
-## Native input events
-All native events (other than the cuustom `input` and `change` events) are supported, without
-the need for the `.native` modifier. Available events will vary based on input type.
 
-The custom `input` and `change` events receive to paramters: the input value (after
-custom formatter has been applied), and the native event object.
+## 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-input>` and `<b-for-textarea>` 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
@@ -421,12 +439,8 @@ 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.
 
-### Custom input methods
-`b-form-input` also exposes the following custom method(s):
-
-| Method | Notes
-| ------ | -----
-| `.format()` | Forces the input to run the formatter. The event arument passed to the formatter will be `null`
+## Component alias
+You can use `<b-form-input>` by it's shorter alias `<b-input>`.
 
 
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js
index ab72e0503f9..8469d69a017 100644
--- a/src/components/form-input/form-input.js
+++ b/src/components/form-input/form-input.js
@@ -2,6 +2,7 @@ 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 { arrayIncludes } from '../../utils/array'
@@ -31,26 +32,39 @@ const TYPES = [
   'week'
 ]
 
-// Custom event to update the model
-const MODEL_EVENT = 'update:value'
-
 export default {
-  mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formSelectionMixin, formValidityMixin],
+  mixins: [
+    idMixin,
+    formMixin,
+    formSizeMixin,
+    formStateMixin,
+    formTextMixin,
+    formSelectionMixin,
+    formValidityMixin
+  ],
   render (h) {
     var self = this
     return h('input', {
       ref: 'input',
-      class: self.inputClass,
+      class: self.computedClass,
+      directives: [
+        {
+          name: 'model',
+          rawName: 'v-model',
+          value: self.localValue,
+          expression: 'localValue'
+        }
+      ],
       attrs: {
         id: self.safeId(),
         name: self.name,
-        form: this.form || null,
+        form: self.form || null,
         type: self.localType,
         disabled: self.disabled,
-        required: self.required,
-        readonly: self.readonly || self.plaintext,
         placeholder: self.placeholder,
+        required: self.required,
         autocomplete: self.autocomplete || null,
+        readonly: self.readonly || self.plaintext,
         min: self.min,
         max: self.max,
         step: self.step,
@@ -60,61 +74,20 @@ export default {
       domProps: {
         value: self.localValue
       },
-      directives: [
-        { name: 'model', rawName: 'v-model', value: self.localValue, expression: 'localValue' }
-      ],
       on: {
         ...self.$listeners,
         input: self.onInput,
-        change: self.onChange
+        change: self.onChange,
+        blur: self.onBlur
       }
     })
   },
-  data () {
-    return {
-      localValue: this.value
-    }
-  },
-  model: {
-    prop: 'value',
-    event: MODEL_EVENT
-  },
   props: {
-    value: {
-      default: ''
-    },
     type: {
       type: String,
       default: 'text',
       validator: type => arrayIncludes(TYPES, type)
     },
-    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
-    },
-    lazyFormatter: {
-      type: Boolean,
-      default: false
-    },
     noWheel: {
       // Disable mousewheel to prevent wheel from changing values (i.e. number/date).
       type: Boolean,
@@ -137,35 +110,9 @@ export default {
     localType () {
       // We only allow certain types
       return arrayIncludes(TYPES, this.type) ? this.type : 'text'
-    },
-    inputClass () {
-      return [
-        {
-          '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 'true')
-      return this.ariaInvalid
     }
   },
   mounted () {
-    this.setValue(this.lazyFormatter ? this.value : this.getFormatted(this.value, null))
     this.setWheelStopper(this.noWheel)
   },
   deactivated () {
@@ -183,76 +130,32 @@ export default {
     this.setWheelStopper(false)
   },
   watch: {
-    value (newVal) {
-      this.setValue(this.lazyFormatter ? newVal : this.getFormatted(newVal, null))
-    },
     noWheel (newVal) {
       this.setWheelStopper(newVal)
     }
   },
   methods: {
-    setValue (val) {
-      if (val !== this.localVal) {
-        // Only update value if changed, to minimize duplicte emits
-        this.localValue = val
-        this.$emit(MODEL_EVENT, this.localValue)
-      }
-    },
-    onInput (evt) {
-      if (evt.target.composing) return
-      const value = evt.target.value
-      this.setValue(this.lazyFormatter ? value : this.getFormatted(value, evt))
-      this.$emit('input', this.localValue, evt)
-    },
-    onChange (evt) {
-      if (evt.target.composing) return
-      this.setValue(this.format(evt.target.value, evt))
-      this.$emit('change', this.localValue, evt)
-    },
-    getFormatted (value, event = null) {
-      return this.formatter ? this.formatter(value, event) : value
-    },
     setWheelStopper (on) {
       const input = this.$el
-      // We use native events, so that we don't interfere with prepgation
+      // We use native events, so that we don't interfere with propgation
       if (on) {
-        eventOn(input, 'focus', this.onFocus)
-        eventOn(input, 'blur', this.onBlur)
+        eventOn(input, 'focus', this.onWheelFocus)
+        eventOn(input, 'blur', this.onWheelBlur)
       } else {
-        eventOff(input, 'focus', this.onFocus)
-        eventOff(input, 'blur', this.onBlur)
+        eventOff(input, 'focus', this.onWheelFocus)
+        eventOff(input, 'blur', this.onWheelBlur)
         eventOff(document, 'wheel', this.stopWheel)
       }
     },
-    onFocus (evt) {
+    onWheelFocus (evt) {
       eventOn(document, 'wheel', this.stopWheel)
     },
-    onBlur (evt) {
+    onWheelBlur (evt) {
       eventOff(document, 'wheel', this.stopWheel)
     },
     stopWheel (evt) {
       evt.preventDefault()
       this.$el.blur()
-    },
-    // Exposed methods
-    format () {
-      // Force the formatter to run
-      this.setValue(this.getFormatted(this.localValue, null))
-      return this.localValue
-    },
-    focus () {
-      // Expose the input focus() method
-      /* istanbul ignore next */
-      if (!this.disabled) {
-        this.$el.focus()
-      }
-    },
-    blur () {
-      // Expose the input blur() method
-      /* istanbul ignore next */
-      if (!this.disabled) {
-        this.$el.blur()
-      }
     }
   }
 }
diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js
index 39c3ea359b2..23ef549c6b4 100755
--- a/src/components/form-input/form-input.spec.js
+++ b/src/components/form-input/form-input.spec.js
@@ -296,8 +296,8 @@ describe('form-input', async () => {
     input.trigger('input')
 
     expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted().input[0].length).toEqual(1)
     expect(wrapper.emitted().input[0][0]).toEqual('test')
-    expect(wrapper.emitted().input[0].length).toEqual(2)
   })
 
   it('emits a native focus event', async () => {
@@ -314,18 +314,19 @@ describe('form-input', async () => {
     expect(spy).toHaveBeenCalled()
   })
 
-  it('emits a native blur event', async () => {
-    const spy = jest.fn()
+  it('emits a blur event with native event as only arg', async () => {
     const wrapper = mount(Input, {
-      listeners: {
-        blur: spy
+      propsData: {
+        value: 'TEST'
       }
     })
     const input = wrapper.find('input')
     input.trigger('blur')
 
-    expect(wrapper.emitted()).toMatchObject({})
-    expect(spy).toHaveBeenCalled()
+    expect(wrapper.emitted('blur')).toBeDefined()
+    expect(wrapper.emitted('blur')[0].length).toEqual(1)
+    expect(wrapper.emitted('blur')[0][0] instanceof Event).toBe(true)
+    expect(wrapper.emitted('blur')[0][0].type).toEqual('blur')
   })
 
   it('applies formatter on input when not lazy', async () => {
@@ -341,12 +342,15 @@ describe('form-input', async () => {
     input.element.value = 'TEST'
     input.trigger('input')
 
-    expect(wrapper.emitted('update:value')).toBeDefined()
-    let last = wrapper.emitted('update:value').length - 1
-    expect(wrapper.emitted('update:value')[last][0]).toEqual('test')
+    expect(wrapper.emitted('update')).toBeDefined()
+    expect(wrapper.emitted('update').length).toEqual(1)
+    expect(wrapper.emitted('update')[0][0]).toEqual('test')
 
     expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted('input').length).toEqual(1)
     expect(wrapper.emitted('input')[0][0]).toEqual('test')
+
+    expect(input.vm.localValue).toEqual('test')
   })
 
   it('does not apply formatter on input when lazy', async () => {
@@ -363,15 +367,17 @@ describe('form-input', async () => {
     input.element.value = 'TEST'
     input.trigger('input')
 
-    expect(wrapper.emitted('update:value')).toBeDefined()
-    let last = wrapper.emitted('update:value').length - 1
-    expect(wrapper.emitted('update:value')[last][0]).toEqual('TEST')
+    expect(wrapper.emitted('update')).toBeDefined()
+    expect(wrapper.emitted('update').length).toEqual(1)
+    expect(wrapper.emitted('update')[0][0]).toEqual('TEST')
     expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted('input').length).toEqual(1)
     expect(wrapper.emitted('input')[0][0]).toEqual('TEST')
     expect(wrapper.emitted('change')).not.toBeDefined()
+    expect(input.vm.localValue).toEqual('TEST')
   })
 
-  it('applies formatter on change when lazy', async () => {
+  it('applies formatter on blur when lazy', async () => {
     const wrapper = mount(Input, {
       propsData: {
         value: '',
@@ -387,17 +393,25 @@ describe('form-input', async () => {
     // input event needed to set initial value
     input.element.value = 'TEST'
     input.trigger('input')
+
     expect(input.vm.localValue).toEqual('TEST')
-    expect(wrapper.emitted('update:value')).toBeDefined()
+    expect(wrapper.emitted('update')).toBeDefined()
+    expect(wrapper.emitted('update').length).toEqual(1)
+    expect(wrapper.emitted('update')[0][0]).toEqual('TEST')
+
+    input.trigger('blur')
 
-    input.trigger('change')
+    expect(wrapper.emitted('update')).toBeDefined()
+    expect(wrapper.emitted('update').length).toEqual(2)
+    expect(wrapper.emitted('update')[1][0]).toEqual('test')
+    expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted('change')).not.toBeDefined()
+    expect(wrapper.emitted('blur')).toBeDefined()
+    expect(wrapper.emitted('blur').length).toEqual(1)
     expect(input.vm.localValue).toEqual('test')
-    expect(wrapper.emitted('update:value')).toBeDefined()
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('change')[0][0]).toEqual('test')
   })
 
-  it('applies formatter when value supplied on mount and not lazy', async () => {
+  it('does not apply formatter when value supplied on mount and not lazy', async () => {
     const wrapper = mount(Input, {
       propsData: {
         value: 'TEST',
@@ -409,15 +423,14 @@ describe('form-input', async () => {
     })
     const input = wrapper.find('input')
 
-    expect(input.vm.localValue).toEqual('test')
-    expect(wrapper.emitted('update:value')).toBeDefined()
-    const last = wrapper.emitted('update:value').length - 1
-    expect(wrapper.emitted('update:value')[last][0]).toEqual('test')
+    expect(input.vm.localValue).toEqual('TEST')
+    expect(wrapper.emitted('update')).not.toBeDefined()
     expect(wrapper.emitted('input')).not.toBeDefined()
     expect(wrapper.emitted('change')).not.toBeDefined()
+    expect(wrapper.emitted('blur')).not.toBeDefined()
   })
 
-  it('applies formatter when value prop updated and not lazy', async () => {
+  it('does not apply formatter when value prop updated and not lazy', async () => {
     const wrapper = mount(Input, {
       propsData: {
         value: '',
@@ -431,12 +444,11 @@ describe('form-input', async () => {
     wrapper.setProps({ value: 'TEST' })
     const input = wrapper.find('input')
 
-    expect(input.element.value).toEqual('test')
-    expect(wrapper.emitted('update:value')).toBeDefined()
-    let last = wrapper.emitted('update:value').length - 1
-    expect(wrapper.emitted('update:value')[last][0]).toEqual('test')
+    expect(input.element.value).toEqual('TEST')
+    expect(wrapper.emitted('update')).not.toBeDefined() // Note emitted as value hasnt changed
     expect(wrapper.emitted('input')).not.toBeDefined()
     expect(wrapper.emitted('change')).not.toBeDefined()
+    expect(wrapper.emitted('blur')).not.toBeDefined()
   })
 
   it('does not apply formatter when value prop updated and lazy', async () => {
@@ -450,13 +462,14 @@ describe('form-input', async () => {
       },
       attachToDocument: true
     })
-
     wrapper.setProps({ value: 'TEST' })
+    const input = wrapper.find('input')
 
-    expect(wrapper.emitted('update:value')).toBeDefined()
+    expect(input.element.value).toEqual('TEST')
+    expect(wrapper.emitted('update')).not.toBeDefined() // not emitted when value doesnt change
     expect(wrapper.emitted('input')).not.toBeDefined()
     expect(wrapper.emitted('change')).not.toBeDefined()
-    expect(wrapper.vm.localValue).toBe('TEST')
+    expect(wrapper.emitted('blur')).not.toBeDefined()
   })
 
   it('focused number input with no-wheel set to true works', async () => {
diff --git a/src/components/form-input/package.json b/src/components/form-input/package.json
index dcd67118373..cb63eb84667 100755
--- a/src/components/form-input/package.json
+++ b/src/components/form-input/package.json
@@ -8,39 +8,41 @@
     "events": [
       {
         "event": "input",
-        "description": "Emitted when the input 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 input (after any formatting applied)"
-          },
-          {
-            "arg": "event",
-            "description": "The native input event object (before any formatting applied)"
+            "description": "Current value of input"
           }
         ]
       },
       {
         "event": "change",
-        "description": "Emitted when the input changes based on user input.",
+        "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 input (after any formatting applied)"
-          },
-          {
-            "arg": "event",
-            "description": "The native change event object (before any formatting applied)"
+            "description": "Current value of input"
           }
         ]
       },
       {
-        "event": "update:value",
-        "description": "Event that updates the v-model.",
+        "event": "update",
+        "description": "Emitted to update the v-model",
         "args": [
           {
             "arg": "value",
-            "description": "current value of the input"
+            "description": "Value of input, after any formatting. Not emitted if the value does nto change"
+          }
+        ]
+      },
+      {
+        "event": "blur",
+        "description": "Emitted after the input looses focus",
+        "args": [
+          {
+            "arg": "event",
+            "description": "Native blur event (before any formmating)"
           }
         ]
       }
diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md
index 9e1453d7e4e..f9ee9f22897 100644
--- a/src/components/form-textarea/README.md
+++ b/src/components/form-textarea/README.md
@@ -9,8 +9,8 @@ and maximum number of rows, and contextual states.
     <b-form-textarea id="textarea1"
                      v-model="text"
                      placeholder="Enter something"
-                     :rows="3"
-                     :max-rows="6">
+                     rows="3"
+                     max-rows="6">
     </b-form-textarea>
     <pre class="mt-3">{{ text }}</pre>
   </div>
@@ -75,10 +75,12 @@ To disable this feature, set the `no-resize` prop to `true`.
 even as the user enters text.
 
 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`).
+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 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.
+Note that the resize handle of the textarea (if supported by the browser) will automatically
+be disabled in auto-height mode.
 
 
 ## Textarea contextual states
@@ -98,9 +100,9 @@ To apply one of the contextual state icons on `<b-form-textarea>`, set the `stat
 <template>
   <b-form-textarea id="textarea2"
                    :state="text.length >= 10"
-                   v-model.trim="text"
+                   v-model="text"
                    placeholder="Enter at least 10 characters"
-                   :rows="3"></b-form-textarea>
+                   rows="3"></b-form-textarea>
 </template>
 
 <script>
diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index c02615503fc..3de35751718 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -35,7 +35,7 @@ export default {
       attrs: {
         id: self.safeId(),
         name: self.name,
-        form: this.form || null,
+        form: self.form || null,
         disabled: self.disabled,
         placeholder: self.placeholder,
         required: self.required,
diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index d7e1437c5a8..07965f4de2a 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -66,9 +66,8 @@ export default {
   computed: {
     computedClass () {
       return [
-        this.plaintext ? 'form-control-plaintext' : 'form-control',
         {
-          // Special class cases for b-form-input input types
+          // Range input needs class custom-range
           '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',