diff --git a/web/roles/create-roles-modal.css b/web/roles/create-roles-modal.css
--- a/web/roles/create-roles-modal.css
+++ b/web/roles/create-roles-modal.css
@@ -16,6 +16,11 @@
   margin: 8px 0 12px 0;
 }
 
+.errorMessage {
+  color: var(--error);
+  align-self: center;
+}
+
 .separator {
   border: 0;
   margin: 16px 32px 8px 32px;
diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -14,6 +14,7 @@
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
+import { values } from 'lib/utils/objects.js';
 
 import css from './create-roles-modal.css';
 import {
@@ -47,8 +48,11 @@
   const [pendingRolePermissions, setPendingRolePermissions] =
     React.useState<$ReadOnlyArray<UserSurfacedPermission>>(rolePermissions);
 
+  const [shouldShowError, setShouldShowError] = React.useState<boolean>(false);
+
   const onChangeRoleName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
+      setShouldShowError(false);
       setPendingRoleName(event.currentTarget.value);
     },
     [],
@@ -131,8 +135,22 @@
     ],
   );
 
+  const errorMessage = React.useMemo(
+    () =>
+      shouldShowError ? (
+        <div className={css.errorMessage}>
+          There is already a role with this name in the community
+        </div>
+      ) : null,
+    [shouldShowError],
+  );
+
   const onClickCreateRole = React.useCallback(() => {
-    // TODO: Error handling in a later diff
+    const threadRoleNames = values(threadInfo.roles).map(role => role.name);
+    if (threadRoleNames.includes(pendingRoleName) && action === 'create_role') {
+      setShouldShowError(true);
+      return;
+    }
 
     dispatchActionPromise(
       modifyCommunityRoleActionTypes,
@@ -168,6 +186,7 @@
             onChange={onChangeRoleName}
           />
         </div>
+        {errorMessage}
       </form>
       <hr className={css.separator} />
       <div className={css.permissionsHeaderContainer}>