diff --git a/js/components/text_input.js b/js/components/text_input.js
new file mode 100644
index 00000000..e027a800
--- /dev/null
+++ b/js/components/text_input.js
@@ -0,0 +1,82 @@
+import MaskedInput, { conformToMask } from 'vue-text-mask'
+import inputValidations from '../lib/input_validations'
+
+export default {
+  name: 'textinput',
+
+  components: {
+    MaskedInput
+  },
+
+  props: {
+    name: String,
+    validation: {
+      type: String,
+      default: () => 'anything'
+    },
+    value: {
+      type: String,
+      default: () => ''
+    }
+  },
+
+  data: function () {
+    return {
+      showError: false,
+      showValid: false,
+      mask: inputValidations[this.validation].mask,
+      renderedValue: this.value
+    }
+  },
+
+  mounted: function () {
+    const value = this.$refs.input.value
+    if (value) {
+      this._checkIfValid({ value, invalidate: true })
+      this.renderedValue = conformToMask(value, this.mask).conformedValue
+    }
+  },
+
+  methods: {
+    // When user types a character
+    onInput: function (value) {
+      this._checkIfValid({ value })
+    },
+
+    // When field is blurred (un-focused)
+    onChange: function (e) {
+      // Only invalidate the field when it blurs
+      this._checkIfValid({ value: e.target.value, invalidate: true })
+    },
+
+    //
+    _checkIfValid: function ({ value, invalidate = false}) {
+      // Validate the value
+      const valid = this._validate(value)
+
+      // Show error messages or not
+      if (valid) {
+        this.showError = false
+      } else if (invalidate) {
+        this.showError = true
+      }
+      this.showValid = valid
+
+      // Emit a change event
+      this.$emit('fieldChange', {
+        value,
+        valid,
+        name: this.name
+      })
+    },
+
+    _validate: function (value) {
+      // Strip out all the mask characters
+      let rawValue = inputValidations[this.validation].unmask.reduce((currentValue, character) => {
+        return currentValue.split(character).join('')
+      }, value)
+
+      return inputValidations[this.validation].match.test(rawValue)
+    }
+  }
+}
diff --git a/js/index.js b/js/index.js
index 72dbda3d..59883c65 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,8 +1,13 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
+import textinput from './components/text_input'
+
 const app = new Vue({
   el: '#app-root',
+  components: {
+    textinput
+  },
   methods: {
     closeModal: function(name) {
       this.modals[name] = false
diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js
new file mode 100644
index 00000000..6e7a066d
--- /dev/null
+++ b/js/lib/input_validations.js
@@ -0,0 +1,20 @@
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import emailMask from 'text-mask-addons/dist/emailMask'
+
+export default {
+  anything: {
+    mask: false,
+    match: /^(?!\s*$).+/,
+    unmask: [],
+  },
+  dollars: {
+    mask: createNumberMask({ prefix: '$', allowDecimal: true }),
+    match: /^-?\d+\.?\d*$/,
+    unmask: ['$',',']
+  },
+  email: {
+    mask: emailMask,
+    match: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
+    unmask: [],
+  }
+}
diff --git a/package.json b/package.json
index 61eddafa..b52327bf 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
   "dependencies": {
     "npm": "^6.0.1",
     "parcel": "^1.9.7",
+    "text-mask-addons": "^3.8.0",
     "uswds": "^1.6.3",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-text-mask": "^6.1.2"
   },
   "devDependencies": {
     "node-sass": "^4.9.2"
diff --git a/templates/base.html b/templates/base.html
index 185cd205..8416032f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,7 @@
 <body class="{% if g.modalOpen %} modalOpen{% endif %}">
 
   <div id='app-root'>
+
     {% block template_vars %}{% endblock %}
 
     {% include 'navigation/topbar.html' %}
@@ -33,7 +34,6 @@
     </div>
 
     {% include 'footer.html' %}
-
     {% block modal %}{% endblock %}
   </div>
 
diff --git a/templates/styleguide.html b/templates/styleguide.html
index b57e45ac..a65069c4 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -130,15 +130,29 @@
 
 
       <form>
-        <div class='usa-input'>
-          <label for='basic-text-1'>
-            Basic Text Input
-            <span class='usa-input__help'>
-              This is some help text to explain what this form field is and why you should fill it out.
-            </span>
-          </label>
-          <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
-        </div>
+        <textinput inline-template validation='dollars' value='1231231'>
+          <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+            <label for='basic-text-1'>
+              Dollars Text Input
+              <span class='usa-input__help'>
+                This is some help text to explain what this form field is and why you should fill it out.
+              </span>
+              <template v-if='showError'>{{ Icon('alert') }}</template>
+              <template v-if='showValid'>{{ Icon('ok') }}</template>
+            </label>
+            <masked-input
+              v-on:input='onInput'
+              v-on:change='onChange'
+              v-model='renderedValue'
+              id='basic-text-1'
+              type='text'
+              ref='input'
+              placeholder='$'
+              :guide="true"
+              :mask="mask">
+            </masked-input>
+          </div>
+        </textinput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>
diff --git a/yarn.lock b/yarn.lock
index b8e561fc..ab510b61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6325,6 +6325,10 @@ terser@^3.7.3:
     source-map "~0.6.1"
     source-map-support "~0.5.6"
 
+text-mask-addons@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/text-mask-addons/-/text-mask-addons-3.8.0.tgz#17b61ef665a4f36811f2ea1f01a223b4be61ab26"
+
 text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -6675,6 +6679,10 @@ vm-browserify@0.0.4, vm-browserify@~0.0.1:
   dependencies:
     indexof "0.0.1"
 
+vue-text-mask@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/vue-text-mask/-/vue-text-mask-6.1.2.tgz#2cc18a1ca04ea66798518a9373929a12256d14b9"
+
 vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"