2 files changed, 17 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index 7557edb1b49..7b0418e1ad5 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -5,6 +5,7 @@ import Group from '~/group';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import NewGroupCreationApp from './components/app.vue';
 import GroupPathValidator from './group_path_validator';
+import initToggleInviteMembers from './toggle_invite_members';
 
 new GroupPathValidator(); // eslint-disable-line no-new
 
@@ -31,3 +32,5 @@ function initNewGroupCreation(el) {
 const el = document.querySelector('.js-new-group-creation');
 
 initNewGroupCreation(el);
+
+initToggleInviteMembers();
diff --git a/app/assets/javascripts/pages/groups/new/toggle_invite_members.js b/app/assets/javascripts/pages/groups/new/toggle_invite_members.js
new file mode 100644
index 00000000000..ffb4964cf7d
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/new/toggle_invite_members.js
@@ -0,0 +1,14 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export default function initToggleInviteMembers() {
+  const inviteMembersSection = document.querySelector('.js-invite-members-section');
+  const setupForCompanyRadios = document.querySelectorAll('input[name="group[setup_for_company]"]');
+
+  if (inviteMembersSection && setupForCompanyRadios.length) {
+    setupForCompanyRadios.forEach((el) => {
+      el.addEventListener('change', (event) => {
+        inviteMembersSection.classList.toggle('hidden', !parseBoolean(event.target.value));
+      });
+    });
+  }
+}