diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html
index 5ffb3dafa..613b01a00 100644
--- a/packages/js-example-app/src/assets/index.html
+++ b/packages/js-example-app/src/assets/index.html
@@ -110,6 +110,11 @@ <h2>Vanilla JS Example Application</h2>
           <blr-radio size="md"></blr-radio>
         </div>
 
+        <div class="component">
+          <p>Text Input</p>
+          <blr-text-input size="md" placeholder="Placeholder-text" value="" maxlength="140" label="Label-text" labelappendix="(Appendix)" arialabel="TextInput" name="TextInput" theme="Light" textinputid="Input Id" haslabel="true" type="text" inputicon="blr360" showinputicon="true"></blr-text-input>
+        </div>
+
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar
diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
index 99ab1e38d..40271329e 100644
--- a/packages/js-example-app/src/index.js
+++ b/packages/js-example-app/src/index.js
@@ -8,6 +8,7 @@ const logsContainer = document.querySelector('#logs');
 const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
+const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -66,3 +67,15 @@ blrCheckbox.addEventListener('blrBlur', () => {
 blrSelect.addEventListener('blrChange', (e) => {
   addLog('blr-select changed');
 });
+
+blrTextInput.addEventListener('blrFocus', (e) => {
+  addLog('blr-text-input focused');
+});
+
+blrTextInput.addEventListener('blrBlur', (e) => {
+  addLog('blr-text-input blurred');
+});
+
+blrTextInput.addEventListener('blrChange', (e) => {
+  addLog('blr-text-input changed');
+});