diff --git a/.changeset/smooth-roses-rush.md b/.changeset/smooth-roses-rush.md
new file mode 100644
index 0000000000..4c5da4f42d
--- /dev/null
+++ b/.changeset/smooth-roses-rush.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/password-field': patch
+---
+
+Fix password visibility in Disabled and ReadOnly states
diff --git a/packages/components/fields/password-field/src/password-field.spec.js b/packages/components/fields/password-field/src/password-field.spec.js
index 4159cd3122..6c1527756e 100644
--- a/packages/components/fields/password-field/src/password-field.spec.js
+++ b/packages/components/fields/password-field/src/password-field.spec.js
@@ -141,6 +141,22 @@ describe('when disabled', () => {
     const { getByLabelText } = renderPasswordField({ isDisabled: true });
     expect(getByLabelText('PasswordField')).toBeDisabled();
   });
+  it('should set the input type to password', () => {
+    const { getByLabelText } = renderPasswordField({ isDisabled: true });
+    expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password');
+  });
+  describe('when has value', () => {
+    it('should set the input type to password', () => {
+      const { getByLabelText } = renderPasswordField({
+        value: 'foo',
+        isDisabled: true,
+      });
+      expect(getByLabelText('PasswordField')).toHaveAttribute(
+        'type',
+        'password'
+      );
+    });
+  });
 });
 
 describe('when readOnly', () => {
@@ -148,6 +164,45 @@ describe('when readOnly', () => {
     const { getByLabelText } = renderPasswordField({ isReadOnly: true });
     expect(getByLabelText('PasswordField')).toHaveAttribute('readonly');
   });
+  it('should set the input type to password', () => {
+    const { getByLabelText } = renderPasswordField({ isReadOnly: true });
+    expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password');
+  });
+  describe('when has value', () => {
+    it('should set the input type to password', () => {
+      const { getByLabelText } = renderPasswordField({
+        value: 'foo',
+        isReadOnly: true,
+      });
+      expect(getByLabelText('PasswordField')).toHaveAttribute(
+        'type',
+        'password'
+      );
+    });
+  });
+});
+
+describe('when disabled and readOnly', () => {
+  it('should set the input type to password', () => {
+    const { getByLabelText } = renderPasswordField({
+      isDisabled: true,
+      isReadOnly: true,
+    });
+    expect(getByLabelText('PasswordField')).toHaveAttribute('type', 'password');
+  });
+  describe('when has value', () => {
+    it('should set the input type to password', () => {
+      const { getByLabelText } = renderPasswordField({
+        value: 'foo',
+        isDisabled: true,
+        isReadOnly: true,
+      });
+      expect(getByLabelText('PasswordField')).toHaveAttribute(
+        'type',
+        'password'
+      );
+    });
+  });
 });
 
 describe('when required', () => {
diff --git a/packages/components/fields/password-field/src/password-field.tsx b/packages/components/fields/password-field/src/password-field.tsx
index e2d7140e5e..3ab1cf6cc1 100644
--- a/packages/components/fields/password-field/src/password-field.tsx
+++ b/packages/components/fields/password-field/src/password-field.tsx
@@ -176,6 +176,7 @@ const PasswordField = (props: TPasswordField) => {
   const [isPasswordVisible, togglePasswordVisibility] = useToggleState(false);
   const id = useFieldId(props.id, sequentialId);
   const hasError = props.touched && hasErrors(props.errors);
+  const canInteract = !props.isDisabled && !props.isReadOnly;
 
   if (!props.isReadOnly) {
     warning(
@@ -205,7 +206,7 @@ const PasswordField = (props: TPasswordField) => {
             onInfoButtonClick={props.onInfoButtonClick}
             hasRequiredIndicator={props.isRequired}
           />
-          {!props.isDisabled && !props.isReadOnly && (
+          {canInteract && (
             <FlatButton
               icon={isPasswordVisible ? <EyeCrossedIcon /> : <EyeIcon />}
               label={
@@ -228,7 +229,7 @@ const PasswordField = (props: TPasswordField) => {
           onBlur={props.onBlur}
           onFocus={props.onFocus}
           isAutofocussed={props.isAutofocussed}
-          isPasswordVisible={isPasswordVisible}
+          isPasswordVisible={canInteract ? isPasswordVisible : false}
           isDisabled={props.isDisabled}
           isReadOnly={props.isReadOnly}
           hasError={hasError}