diff --git a/src/components/TextInput.vue b/src/components/TextInput.vue
index dd0db98..32ef85d 100644
--- a/src/components/TextInput.vue
+++ b/src/components/TextInput.vue
@@ -105,16 +105,12 @@ const isPasswordField = props.type === 'password';
 // The current inputType, this will swap between text and password.
 const inputType = ref(props.type);
 // false: hide password, true: show password
-const passwordIsVisible = ref(isPasswordField ? false : null);
+const passwordIsVisible = ref(false);
 
 const togglePasswordVisibility = () => {
   inputType.value = passwordIsVisible.value ? 'password' : 'text';
   passwordIsVisible.value = !passwordIsVisible.value;
-  if (passwordIsVisible.value === true) {
-    passwordIndicatorText.value = hidePasswordText;
-  } else if (passwordIsVisible.value === false) {
-    passwordIndicatorText.value = showPasswordText;
-  }
+  passwordIndicatorText.value = passwordIsVisible.value ? hidePasswordText : showPasswordText
 };
 </script>
 
@@ -153,11 +149,11 @@ const togglePasswordVisibility = () => {
           tabindex="0" 
           :title="passwordIndicatorText"
           @keyup.space="togglePasswordVisibility" 
-          @click="togglePasswordVisibility"
-          v-if="passwordIsVisible !== null" 
+          @click.prevent="togglePasswordVisibility"
+          v-if="isPasswordField" 
         >
-          <eye-icon class="icon" alt="" v-if="passwordIsVisible === true" />
-          <eye-off-icon class="icon" alt="" v-else-if="passwordIsVisible === false" />
+          <eye-icon class="icon" alt="" v-if="passwordIsVisible" />
+          <eye-off-icon class="icon" alt="" v-else />
         </span>
         <span
           v-else-if="maxLength !== null"
diff --git a/test/components/TextInput.test.js b/test/components/TextInput.test.js
index 9823845..4a1bf53 100644
--- a/test/components/TextInput.test.js
+++ b/test/components/TextInput.test.js
@@ -1,5 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { t } from '@/composable/i18n';
 import TextInput from '@/components/TextInput.vue';
 
 
@@ -303,7 +304,7 @@ describe('TextInput', () => {
     }
   });
 
-  it('able to enter text', async () => {
+  it('renders text inputs', async () => {
     const ourProps = {
       name: 'text-input-test',
       label: 'This is the TextInput label!',
@@ -346,7 +347,42 @@ describe('TextInput', () => {
     expect(wrapper.emitted()['blur'][0][0].target.value).toBe(inputText);
   });
 
-  it('able to reset the text input using exposed reset method', async () => {
+  it('renders password inputs and toggles visibility', async () => {
+    const ourProps = {
+      name: 'password-input-test',
+      label: 'The Password input label',
+      help: null,
+      error: null,
+      prefix: null,
+      outerPrefix: null,
+      smallText: false,
+      smallInput: false,
+      maxLength: null,
+      modelValue: null,
+      dataTestid: 'password-input-test',
+      type: 'password',
+    };
+
+    wrapper = mount(TextInput, {
+      propsData: ourProps,
+    });
+
+    const textInputSel = `[data-testid=${ourProps['dataTestid']}]`;
+    const textInput = wrapper.find(textInputSel);
+    expect(textInput.exists()).toBe(true);
+    expect(textInput.attributes().type).toBe('password');
+
+    const passwordToggle = wrapper.find('span.tbpro-input-suffix');
+    expect(passwordToggle.exists()).toBe(true);
+    expect(passwordToggle.isVisible()).toBe(true);
+    expect(passwordToggle.attributes().title).toBe(t('textInput.passwordIndicator.show'));
+
+    await passwordToggle.trigger('click');
+    expect(textInput.attributes().type).toBe('text');
+    expect(passwordToggle.attributes().title).toBe(t('textInput.passwordIndicator.hide'));
+  });
+
+  it('resets the text input using exposed reset method', async () => {
     const ourProps = {
       name: 'text-input-test',
       label: 'This is the TextInput label!',