diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
index c6466a2305..ca899b368d 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
@@ -40,8 +40,8 @@ class CreateRealmRolePage {
   checkNameDisabled() {
     cy.findByTestId(this.#realmRoleNameInput).should(
       "have.attr",
-      "readonly",
-      "readonly",
+      "disabled",
+      "disabled",
     );
     return this;
   }
diff --git a/js/apps/admin-ui/src/components/role-form/RoleForm.tsx b/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
index 86ea8f1091..b7aad9bd88 100644
--- a/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
+++ b/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
@@ -51,7 +51,7 @@ export const RoleForm = ({
                 }
               },
             }}
-            readOnly={editMode}
+            isDisabled={editMode}
           />
           <TextAreaControl
             name="description"