diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 2d2591f5ee4e..bc48836cda17 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -144,6 +144,15 @@ module.exports = {
     'no-empty': 'off',
     'no-empty-pattern': 'off',
     'no-nested-ternary': 'error',
+    'no-restricted-syntax': [
+      'error',
+      {
+        'message':
+          'InputGroup no longer renders custom controls. Use SelectField for a labelled Select, or FieldLabel + FieldError for other controls.',
+        'selector':
+          "JSXOpeningElement[name.name='InputGroup'] JSXAttribute[name.name='component']",
+      },
+    ],
     'no-unused-vars': 'off',
     'no-var': 'error',
     'object-curly-spacing': ['error', 'always'],
diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx
index 1d718f5c7d3e..1a1082cbb189 100644
--- a/frontend/common/utils/utils.tsx
+++ b/frontend/common/utils/utils.tsx
@@ -789,11 +789,11 @@ const Utils = Object.assign({}, BaseUtils, {
       .replace(/[\s_]+/g, '-')
       .toLowerCase(),
 
-  toSelectedValue: (
-    value: string,
-    options: { label: string; value: string }[],
-    defaultValue?: string,
-  ) => {
+  toSelectedValue: <T extends { label: string; value?: unknown }>(
+    value: unknown,
+    options: T[] | undefined,
+    defaultValue?: T,
+  ): T | undefined => {
     return options?.find((option) => option.value === value) ?? defaultValue
   },
 
diff --git a/frontend/web/components/EditPermissions.tsx b/frontend/web/components/EditPermissions.tsx
index 266467d62b79..401c3c26cd1b 100644
--- a/frontend/web/components/EditPermissions.tsx
+++ b/frontend/web/components/EditPermissions.tsx
@@ -1,4 +1,5 @@
 import React, { FC, forwardRef, useCallback, useEffect, useState } from 'react'
+import FieldLabel from './base/forms/FieldLabel'
 import { find } from 'lodash'
 import { close as closeIcon } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
@@ -55,7 +56,6 @@ import {
 
 import MyRoleSelect from './MyRoleSelect'
 import Panel from './base/grid/Panel'
-import InputGroup from './base/forms/InputGroup'
 import classNames from 'classnames'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import { useHasPermission } from 'common/providers/Permission'
@@ -934,47 +934,39 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
           </div>
           {roles && level === 'organisation' && (
             <FormGroup className='px-4'>
-              <InputGroup
-                component={
-                  <div>
-                    <Row>
-                      <strong style={{ width: 70 }}>Roles: </strong>
-                      {rolesAdded?.map((r) => (
-                        <Row
-                          key={r.id}
-                          onClick={() => removeOwner(r.id)}
-                          className='chip'
-                          style={{ marginBottom: 4, marginTop: 4 }}
-                        >
-                          <span className='font-weight-bold'>{r.name}</span>
-                          <span className='chip-icon ion'>
-                            <IonIcon
-                              icon={closeIcon}
-                              style={{ fontSize: '13px' }}
-                            />
-                          </span>
-                        </Row>
-                      ))}
-                      <Button
-                        theme='text'
-                        onClick={() => setShowRoles(true)}
-                        style={{ width: 70 }}
+              <div className='form-group full-width'>
+                <FieldLabel tooltip='Assigns what role the user/group will have'>
+                  Assign roles
+                </FieldLabel>
+                <div>
+                  <Row>
+                    <strong style={{ width: 70 }}>Roles: </strong>
+                    {rolesAdded?.map((r) => (
+                      <Row
+                        key={r.id}
+                        onClick={() => removeOwner(r.id)}
+                        className='chip'
+                        style={{ marginBottom: 4, marginTop: 4 }}
                       >
-                        Add Role
-                      </Button>
-                    </Row>
-                  </div>
-                }
-                type='text'
-                title='Assign roles'
-                tooltip='Assigns what role the user/group will have'
-                inputProps={{
-                  className: 'full-width',
-                  style: { minHeight: 80 },
-                }}
-                className='full-width'
-                placeholder='Add an optional description...'
-              />
+                        <span className='font-weight-bold'>{r.name}</span>
+                        <span className='chip-icon ion'>
+                          <IonIcon
+                            icon={closeIcon}
+                            style={{ fontSize: '13px' }}
+                          />
+                        </span>
+                      </Row>
+                    ))}
+                    <Button
+                      theme='text'
+                      onClick={() => setShowRoles(true)}
+                      style={{ width: 70 }}
+                    >
+                      Add Role
+                    </Button>
+                  </Row>
+                </div>
+              </div>
             </FormGroup>
           )}
           {level !== 'environment' && level !== 'project' && (
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index cb2c6d71a6fd..7dbddbaa6e49 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -30,8 +30,6 @@ interface InputGroupProps {
   tooltip?: string
   tooltipPlace?: TooltipProps['place']
   unsaved?: boolean
-  // Render an arbitrary control instead of the default Input/textarea.
-  component?: ReactNode
   textarea?: boolean
   // Legacy: consumers pass truthy/falsy non-booleans (e.g. `name && name.length`);
   // coerced to a boolean before it reaches Input.
@@ -60,7 +58,6 @@ interface InputGroupProps {
 
 const InputGroup: FC<InputGroupProps> = ({
   className,
-  component,
   'data-test': dataTest,
   defaultValue,
   disabled,
@@ -125,54 +122,50 @@ const InputGroup: FC<InputGroupProps> = ({
       )}
 
       <div>
-        {component ? (
-          component
-        ) : (
-          <div>
-            {textarea ? (
-              <textarea
-                ref={(c) => {
-                  inputRef.current = c
-                }}
-                {...(restInputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
-                disabled={disabled}
-                value={value}
-                defaultValue={defaultValue}
-                data-test={dataTest}
-                onChange={onChange}
-                id={id}
-                aria-invalid={hasError}
-                aria-describedby={hasError ? errorId : undefined}
-                placeholder={placeholder}
-                onBlur={onBlur}
-              />
-            ) : (
-              <Input
-                ref={(c) => {
-                  inputRef.current = c
-                }}
-                {...restInputProps}
-                isValid={
-                  isValid === null || isValid === undefined
-                    ? undefined
-                    : !!isValid
-                }
-                disabled={disabled}
-                defaultValue={defaultValue}
-                value={value}
-                data-test={dataTest}
-                onChange={onChange}
-                type={type || 'text'}
-                id={id}
-                aria-invalid={hasError}
-                aria-describedby={hasError ? errorId : undefined}
-                onBlur={onBlur}
-                placeholder={placeholder}
-                size={size}
-              />
-            )}
-          </div>
-        )}
+        <div>
+          {textarea ? (
+            <textarea
+              ref={(c) => {
+                inputRef.current = c
+              }}
+              {...(restInputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+              disabled={disabled}
+              value={value}
+              defaultValue={defaultValue}
+              data-test={dataTest}
+              onChange={onChange}
+              id={id}
+              aria-invalid={hasError}
+              aria-describedby={hasError ? errorId : undefined}
+              placeholder={placeholder}
+              onBlur={onBlur}
+            />
+          ) : (
+            <Input
+              ref={(c) => {
+                inputRef.current = c
+              }}
+              {...restInputProps}
+              isValid={
+                isValid === null || isValid === undefined
+                  ? undefined
+                  : !!isValid
+              }
+              disabled={disabled}
+              defaultValue={defaultValue}
+              value={value}
+              data-test={dataTest}
+              onChange={onChange}
+              type={type || 'text'}
+              id={id}
+              aria-invalid={hasError}
+              aria-describedby={hasError ? errorId : undefined}
+              onBlur={onBlur}
+              placeholder={placeholder}
+              size={size}
+            />
+          )}
+        </div>
       </div>
       <FieldError id={errorId} error={errorContent} />
     </div>
diff --git a/frontend/web/components/base/forms/SelectField.tsx b/frontend/web/components/base/forms/SelectField.tsx
index 7c3a52ce045f..fdb0ab6d67bb 100644
--- a/frontend/web/components/base/forms/SelectField.tsx
+++ b/frontend/web/components/base/forms/SelectField.tsx
@@ -86,8 +86,13 @@ function SelectField<Option = unknown, IsMulti extends boolean = false>({
           {title}
         </FieldLabel>
       )}
+      {/* The legacy select SCSS (.react-select .react-select, .select-* size
+          blocks) only applies when the wrapper carries these classes, which
+          call sites historically passed by hand (or forgot to). SelectField
+          always sets them, so its selects are deterministically styled. */}
       <Select
         {...selectProps}
+        className={cn('react-select', selectProps.size)}
         inputId={inputId}
         data-test={dataTest}
         aria-invalid={hasError || undefined}
diff --git a/frontend/web/components/metadata/SupportedContentTypesSelect.tsx b/frontend/web/components/metadata/SupportedContentTypesSelect.tsx
index e89561814f1c..6a01beccafb6 100644
--- a/frontend/web/components/metadata/SupportedContentTypesSelect.tsx
+++ b/frontend/web/components/metadata/SupportedContentTypesSelect.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import { useGetSupportedContentTypeQuery } from 'common/services/useSupportedContentType'
 import { ContentType, MetadataFieldModelField } from 'common/types/responses'
-import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import ContentTypesMetadataFieldTable from './ContentTypesMetadataFieldTable'
 
 type SupportedContentTypesSelectType = {
@@ -64,28 +64,25 @@ const SupportedContentTypesSelect: FC<SupportedContentTypesSelectType> = ({
 
   return (
     <>
-      <InputGroup
+      <SelectField
         title={'Entities'}
-        component={
-          <Select
-            placeholder='Select the Entity'
-            options={(supportedContentTypes || [])
-              .filter(
-                (v) =>
-                  v.model !== 'project' &&
-                  v.model !== 'organisation' &&
-                  !selectedContentTypes.some((x) => x.value === `${v.id}`),
-              )
-              .map((v: ContentType) => ({
-                label: v.model,
-                value: `${v.id}`,
-              }))}
-            onChange={(v: SelectContentTypesType) => {
-              setSelectedContentTypes((prevState) => [...prevState, v])
-            }}
-            className='mb-4 react-select'
-          />
-        }
+        placeholder='Select the Entity'
+        options={(supportedContentTypes || [])
+          .filter(
+            (v) =>
+              v.model !== 'project' &&
+              v.model !== 'organisation' &&
+              !selectedContentTypes.some((x) => x.value === `${v.id}`),
+          )
+          .map((v: ContentType) => ({
+            label: v.model,
+            value: `${v.id}`,
+          }))}
+        onChange={(v) => {
+          if (v) {
+            setSelectedContentTypes((prevState) => [...prevState, v])
+          }
+        }}
       />
       {!!selectedContentTypes.length && (
         <ContentTypesMetadataFieldTable
diff --git a/frontend/web/components/modals/ChangeRequestModal.tsx b/frontend/web/components/modals/ChangeRequestModal.tsx
index ce3128aeac83..dd3378ac9999 100644
--- a/frontend/web/components/modals/ChangeRequestModal.tsx
+++ b/frontend/web/components/modals/ChangeRequestModal.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useMemo, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import UserSelect from 'components/UserSelect'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import Button from 'components/base/forms/Button'
@@ -170,27 +171,26 @@ const ChangeRequestModal: FC<ChangeRequestModalProps> = ({
               />
             </FormGroup>
             <div>
-              <InputGroup
-                tooltip='Allows you to set a date and time in which your change will only become active. All dates are displayed in your local timezone.'
-                title='Schedule Change'
-                component={
-                  <Row>
-                    <DateSelect
-                      isValid={!!liveFrom?.length}
-                      dateFormat='MMMM d, yyyy h:mm aa'
-                      onChange={handleOnDateChange}
-                      selected={liveFrom ? moment(liveFrom).toDate() : null}
-                    />
-                    <Button
-                      className='ml-2'
-                      onClick={handleClear}
-                      theme='secondary'
-                    >
-                      Clear
-                    </Button>
-                  </Row>
-                }
-              />
+              <div className='form-group'>
+                <FieldLabel tooltip='Allows you to set a date and time in which your change will only become active. All dates are displayed in your local timezone.'>
+                  Schedule Change
+                </FieldLabel>
+                <Row>
+                  <DateSelect
+                    isValid={!!liveFrom?.length}
+                    dateFormat='MMMM d, yyyy h:mm aa'
+                    onChange={handleOnDateChange}
+                    selected={liveFrom ? moment(liveFrom).toDate() : null}
+                  />
+                  <Button
+                    className='ml-2'
+                    onClick={handleClear}
+                    theme='secondary'
+                  >
+                    Clear
+                  </Button>
+                </Row>
+              </div>
             </div>
             {showAssignees && moment(liveFrom).isSame(currDate) && (
               <InfoMessage>
@@ -212,47 +212,26 @@ const ChangeRequestModal: FC<ChangeRequestModalProps> = ({
               showAssignees &&
               !Utils.getFlagsmithHasFeature('disable_users_as_reviewers') && (
                 <FormGroup className='mb-4'>
-                  <InputGroup
-                    component={
-                      <div>
-                        {!Utils.getFlagsmithHasFeature(
-                          'disable_users_as_reviewers',
-                        ) && (
-                          <Row>
-                            <strong style={{ width: 70 }}> Users: </strong>
-                            {ownerUsers.map((u) => (
-                              <Row
-                                key={u.id}
-                                onClick={() => removeOwner(u.id)}
-                                className='chip'
-                                style={{ marginBottom: 4, marginTop: 4 }}
-                              >
-                                <span className='font-weight-bold'>
-                                  {getUserDisplayName(u)}
-                                </span>
-                                <span className='chip-icon ion'>
-                                  <IonIcon icon={close} />
-                                </span>
-                              </Row>
-                            ))}
-                            <Button
-                              theme='text'
-                              onClick={() => setShowUsers(true)}
-                            >
-                              Add user
-                            </Button>
-                          </Row>
-                        )}
+                  <div className='form-group full-width'>
+                    <FieldLabel tooltip='Assignees will be able to review and approve the change request'>
+                      Assignees
+                    </FieldLabel>
+                    <div>
+                      {!Utils.getFlagsmithHasFeature(
+                        'disable_users_as_reviewers',
+                      ) && (
                         <Row>
-                          <strong style={{ width: 70 }}> Groups: </strong>
-                          {ownerGroups?.map((u) => (
+                          <strong style={{ width: 70 }}> Users: </strong>
+                          {ownerUsers.map((u) => (
                             <Row
                               key={u.id}
-                              onClick={() => removeOwner(u.id, false)}
+                              onClick={() => removeOwner(u.id)}
                               className='chip'
                               style={{ marginBottom: 4, marginTop: 4 }}
                             >
-                              <span className='font-weight-bold'>{u.name}</span>
+                              <span className='font-weight-bold'>
+                                {getUserDisplayName(u)}
+                              </span>
                               <span className='chip-icon ion'>
                                 <IonIcon icon={close} />
                               </span>
@@ -260,27 +239,36 @@ const ChangeRequestModal: FC<ChangeRequestModalProps> = ({
                           ))}
                           <Button
                             theme='text'
-                            onClick={() => setShowGroups(true)}
+                            onClick={() => setShowUsers(true)}
                           >
-                            Add group
+                            Add user
                           </Button>
                         </Row>
-                      </div>
-                    }
-                    onChange={(e: Event) =>
-                      setDescription(Utils.safeParseEventValue(e))
-                    }
-                    type='text'
-                    title='Assignees'
-                    tooltipPlace='top'
-                    tooltip='Assignees will be able to review and approve the change request'
-                    inputProps={{
-                      className: 'full-width',
-                      style: { minHeight: 80 },
-                    }}
-                    className='full-width'
-                    placeholder='Add an optional description...'
-                  />
+                      )}
+                      <Row>
+                        <strong style={{ width: 70 }}> Groups: </strong>
+                        {ownerGroups?.map((u) => (
+                          <Row
+                            key={u.id}
+                            onClick={() => removeOwner(u.id, false)}
+                            className='chip'
+                            style={{ marginBottom: 4, marginTop: 4 }}
+                          >
+                            <span className='font-weight-bold'>{u.name}</span>
+                            <span className='chip-icon ion'>
+                              <IonIcon icon={close} />
+                            </span>
+                          </Row>
+                        ))}
+                        <Button
+                          theme='text'
+                          onClick={() => setShowGroups(true)}
+                        >
+                          Add group
+                        </Button>
+                      </Row>
+                    </div>
+                  </div>
                 </FormGroup>
               )}
             {!changeRequest &&
diff --git a/frontend/web/components/modals/CreateGroup.tsx b/frontend/web/components/modals/CreateGroup.tsx
index 7bf930b203df..4a7c6bbccfc3 100644
--- a/frontend/web/components/modals/CreateGroup.tsx
+++ b/frontend/web/components/modals/CreateGroup.tsx
@@ -147,7 +147,7 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
         usersToAddAdmin: (usersToAddAdmin || []).map((user) => user.id),
         usersToRemove: getUsersToRemove(groupData!.users).map((v) => v.id),
         usersToRemoveAdmin: (usersToRemoveAdmin || []).map((user) => user.id),
-      }).then((data) => {
+      }).then((data: { data?: unknown; error?: unknown }) => {
         // @ts-ignore
         if (!data.error) {
           toast('Updated Group')
@@ -165,7 +165,7 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
         orgId,
         users: users as any,
         usersToAddAdmin: (usersToAddAdmin || []).map((user) => user.id),
-      }).then((data) => {
+      }).then((data: { data?: unknown; error?: unknown }) => {
         // @ts-ignore
         if (!data.error) {
           toast('Created Group')
diff --git a/frontend/web/components/modals/CreateMetadataField.tsx b/frontend/web/components/modals/CreateMetadataField.tsx
index 41576945a227..7931480fb333 100644
--- a/frontend/web/components/modals/CreateMetadataField.tsx
+++ b/frontend/web/components/modals/CreateMetadataField.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import Utils from 'common/utils/utils'
 import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import Button from 'components/base/forms/Button'
 import SupportedContentTypesSelect, {
   SelectContentTypesType,
@@ -290,19 +291,16 @@ const CreateMetadataField: FC<CreateMetadataFieldType> = ({
         title={'Description'}
         placeholder={"e.g. 'The JIRA Ticket Number associated with this flag'"}
       />
-      <InputGroup
+      <SelectField
         title={'Type'}
-        component={
-          <Select
-            value={typeValue}
-            placeholder='Select a field type'
-            options={metadataTypes}
-            onChange={(m: MetadataType) => {
-              setTypeValue(m)
-            }}
-            className='mb-4 react-select'
-          />
-        }
+        value={typeValue}
+        placeholder='Select a field type'
+        options={metadataTypes}
+        onChange={(m) => {
+          if (m) {
+            setTypeValue(m)
+          }
+        }}
       />
       <SupportedContentTypesSelect
         organisationId={organisationId}
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index dceff143c620..7e6d69ac5be1 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -31,7 +31,6 @@ import AssociatedSegmentOverrides from 'components/segments/AssociatedSegmentOve
 import { SegmentMembershipTotalBadge } from 'components/segments/SegmentMembershipBadge'
 import Button from 'components/base/forms/Button'
 import InfoMessage from 'components/InfoMessage'
-import InputGroup from 'components/base/forms/InputGroup'
 import Rule from 'components/segments/Rule/Rule'
 import TabItem from 'components/navigation/TabMenu/TabItem'
 import Tabs from 'components/navigation/TabMenu/Tabs'
@@ -523,23 +522,19 @@ const CreateSegment: FC<CreateSegmentType> = ({
 
   const MetadataTab = (
     <FormGroup className='mt-5 setting'>
-      <InputGroup
-        component={
-          <AddMetadataToEntity
-            organisationId={AccountStore.getOrganisation().id}
-            projectId={projectId}
-            entityId={segment.id}
-            entityContentType={segmentContentType?.id}
-            entity={segmentContentType?.model}
-            onChange={(m) => {
-              setMetadata(m as Metadata[])
-              // Need to fix this to be more robust and handle post save
-              if (isEdit) {
-                setMetadataValueChanged(true)
-              }
-            }}
-          />
-        }
+      <AddMetadataToEntity
+        organisationId={AccountStore.getOrganisation().id}
+        projectId={projectId}
+        entityId={segment.id}
+        entityContentType={segmentContentType?.id}
+        entity={segmentContentType?.model}
+        onChange={(m) => {
+          setMetadata(m as Metadata[])
+          // Need to fix this to be more robust and handle post save
+          if (isEdit) {
+            setMetadataValueChanged(true)
+          }
+        }}
       />
     </FormGroup>
   )
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index cb1968c8fcfa..b098d4714200 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import moment from 'moment'
 import EnvironmentSelect, {
   EnvironmentSelectOption,
 } from 'components/EnvironmentSelect'
 import PanelSearch from 'components/PanelSearch'
 import InfoMessage from 'components/InfoMessage'
-import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import { Res, SegmentMembership } from 'common/types/responses'
 import Icon from 'components/icons/Icon'
@@ -147,30 +147,25 @@ const CreateSegmentUsersTabContent: React.FC<
       </InfoMessage>
       <div className='mt-2'>
         <FormGroup>
-          <InputGroup
-            title='Environment'
-            className='col-4'
-            component={
-              <>
-                <EnvironmentSelect
-                  projectId={`${projectId}`}
-                  value={environmentId}
-                  onChange={(environmentId: string) => {
-                    setEnvironmentId(environmentId)
-                  }}
-                  formatOptionLabel={renderEnvOption}
-                />
-                <div className='text-muted fs-small mt-2'>
-                  Last synced:{' '}
-                  {selectedMembership
-                    ? moment(selectedMembership.last_synced_at).format(
-                        'Do MMM YYYY HH:mm:ss',
-                      )
-                    : '—'}
-                </div>
-              </>
-            }
-          />
+          <div className='form-group col-4'>
+            <FieldLabel>Environment</FieldLabel>
+            <EnvironmentSelect
+              projectId={`${projectId}`}
+              value={environmentId}
+              onChange={(environmentId: string) => {
+                setEnvironmentId(environmentId)
+              }}
+              formatOptionLabel={renderEnvOption}
+            />
+            <div className='text-muted fs-small mt-2'>
+              Last synced:{' '}
+              {selectedMembership
+                ? moment(selectedMembership.last_synced_at).format(
+                    'Do MMM YYYY HH:mm:ss',
+                  )
+                : '—'}
+            </div>
+          </div>
           {membersEnabled && segmentId && selectedEnv ? (
             <SegmentMembersList
               projectId={projectId}
diff --git a/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx b/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
index ea8535c37087..182854ce3bcc 100644
--- a/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import { ProjectFlag } from 'common/types/responses'
 import Constants from 'common/constants'
 import InfoMessage from 'components/InfoMessage'
@@ -136,18 +137,17 @@ const FeatureSettingsTab: FC<FeatureSettingsTabProps> = ({
       )}
       {!identity && projectFlag?.tags && (
         <FormGroup className='mb-3 setting'>
-          <InputGroup
-            title={'Tags'}
-            tooltip={Constants.strings.TAGS_DESCRIPTION}
-            component={
-              <AddEditTags
-                readOnly={!!identity || !createFeature}
-                projectId={`${projectId}`}
-                value={projectFlag.tags}
-                onChange={(tags) => onChange({ ...projectFlag, tags })}
-              />
-            }
-          />
+          <div className='form-group'>
+            <FieldLabel tooltip={Constants.strings.TAGS_DESCRIPTION}>
+              Tags
+            </FieldLabel>
+            <AddEditTags
+              readOnly={!!identity || !createFeature}
+              projectId={`${projectId}`}
+              value={projectFlag.tags}
+              onChange={(tags) => onChange({ ...projectFlag, tags })}
+            />
+          </div>
         </FormGroup>
       )}
       {metadataEnable && featureContentType?.id && !identity && (
diff --git a/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx b/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
index cad9f93846e9..9d63b61d232a 100644
--- a/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
-import InputGroup from 'components/base/forms/InputGroup'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import ValueEditor from 'components/ValueEditor'
 import Constants from 'common/constants'
 import { VariationOptions } from 'components/mv/VariationOptions'
@@ -345,30 +345,29 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
 
       {showValue && (
         <FormGroup className='mb-4'>
-          <InputGroup
-            component={
-              <ValueEditor
-                data-test='featureValue'
-                name='featureValue'
-                className={`full-width${hasVariations ? ' code-medium' : ''}`}
-                value={`${
-                  typeof initial_value === 'undefined' || initial_value === null
-                    ? ''
-                    : initial_value
-                }`}
-                onChange={(e: any) => {
-                  const feature_state_value = Utils.getTypedValue(
-                    Utils.safeParseEventValue(e),
-                  )
-                  onEnvironmentFlagChange({ feature_state_value })
-                }}
-                disabled={isDisabled}
-                placeholder="e.g. 'big' "
-              />
-            }
-            tooltip={getValueTooltip(hasVariations, isEdit)}
-            title={valueTitle}
-          />
+          <div className='form-group'>
+            <FieldLabel tooltip={getValueTooltip(hasVariations, isEdit)}>
+              {valueTitle}
+            </FieldLabel>
+            <ValueEditor
+              data-test='featureValue'
+              name='featureValue'
+              className={`full-width${hasVariations ? ' code-medium' : ''}`}
+              value={`${
+                typeof initial_value === 'undefined' || initial_value === null
+                  ? ''
+                  : initial_value
+              }`}
+              onChange={(e: any) => {
+                const feature_state_value = Utils.getTypedValue(
+                  Utils.safeParseEventValue(e),
+                )
+                onEnvironmentFlagChange({ feature_state_value })
+              }}
+              disabled={isDisabled}
+              placeholder="e.g. 'big' "
+            />
+          </div>
           {canCompareValue && (
             <div className='text-end mt-2'>
               <Button
diff --git a/frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx b/frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx
index 512397ef2eb1..6a927bc07d57 100644
--- a/frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx
+++ b/frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import ValueEditor from 'components/ValueEditor'
 import ErrorMessage from 'components/ErrorMessage'
 import Constants from 'common/constants'
 import Icon from 'components/icons/Icon'
 import Input from 'components/base/forms/Input'
-import InputGroup from 'components/base/forms/InputGroup'
 import Button from 'components/base/forms/Button'
 import Utils from 'common/utils/utils'
 import shallowEqual from 'fbjs/lib/shallowEqual'
@@ -65,55 +65,49 @@ export const VariationValueInput: React.FC<VariationValueProps> = ({
           )}
         </div>
       </Row>
-      <InputGroup
-        noMargin
-        component={
-          <>
-            {Utils.renderWithPermission(
-              canCreateFeature,
-              readOnly
-                ? 'Variation values are defined at the feature level and cannot be changed per segment.'
-                : Constants.projectPermissions(
-                    ProjectPermission.CREATE_FEATURE,
-                  ),
-              <ValueEditor
-                data-test={`featureVariationValue${
-                  Utils.featureStateToValue(value) || index
-                }`}
-                name='featureValue'
-                className='full-width code-medium'
-                value={Utils.getTypedValue(Utils.featureStateToValue(value))}
-                disabled={!canCreateFeature || disabled || readOnly}
-                onBlur={() => {
-                  const newValue = {
-                    ...value,
-                    // Trim spaces and do conversion on blur
-                    ...Utils.valueToFeatureState(
-                      Utils.featureStateToValue(value),
-                    ),
-                  }
-                  if (!shallowEqual(newValue, value)) {
-                    //occurs if we converted a trimmed value
-                    onChange(newValue)
-                  }
-                }}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  onChange({
-                    ...value,
-                    ...Utils.valueToFeatureState(
-                      Utils.safeParseEventValue(e),
-                      false,
-                    ),
-                  })
-                }}
-                placeholder="e.g. 'big' "
-              />,
-            )}
-          </>
-        }
-        tooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
-        title='Variation Value'
-      />
+      <div>
+        <FieldLabel
+          tooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
+        >
+          Variation Value
+        </FieldLabel>
+        {Utils.renderWithPermission(
+          canCreateFeature,
+          readOnly
+            ? 'Variation values are defined at the feature level and cannot be changed per segment.'
+            : Constants.projectPermissions(ProjectPermission.CREATE_FEATURE),
+          <ValueEditor
+            data-test={`featureVariationValue${
+              Utils.featureStateToValue(value) || index
+            }`}
+            name='featureValue'
+            className='full-width code-medium'
+            value={Utils.getTypedValue(Utils.featureStateToValue(value))}
+            disabled={!canCreateFeature || disabled || readOnly}
+            onBlur={() => {
+              const newValue = {
+                ...value,
+                // Trim spaces and do conversion on blur
+                ...Utils.valueToFeatureState(Utils.featureStateToValue(value)),
+              }
+              if (!shallowEqual(newValue, value)) {
+                //occurs if we converted a trimmed value
+                onChange(newValue)
+              }
+            }}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange({
+                ...value,
+                ...Utils.valueToFeatureState(
+                  Utils.safeParseEventValue(e),
+                  false,
+                ),
+              })
+            }}
+            placeholder="e.g. 'big' "
+          />,
+        )}
+      </div>
       <Row className='justify-content-between align-items-center mt-2'>
         <label className='mb-0'>{weightTitle}</label>
         <div className='d-flex align-items-center gap-2'>
diff --git a/frontend/web/components/pages/ChangeRequestDetailPage.tsx b/frontend/web/components/pages/ChangeRequestDetailPage.tsx
index 90980ebefce1..9166600475db 100644
--- a/frontend/web/components/pages/ChangeRequestDetailPage.tsx
+++ b/frontend/web/components/pages/ChangeRequestDetailPage.tsx
@@ -33,7 +33,6 @@ import NewVersionWarning from 'components/NewVersionWarning'
 import Breadcrumb from 'components/Breadcrumb'
 import PageTitle from 'components/PageTitle'
 import InfoMessage from 'components/InfoMessage'
-import InputGroup from 'components/base/forms/InputGroup'
 import SettingsButton from 'components/SettingsButton'
 import UserSelect from 'components/UserSelect'
 import MyGroupsSelect from 'components/MyGroupsSelect'
@@ -596,103 +595,94 @@ export const ChangeRequestPageInner: FC<ChangeRequestPageInnerType> = ({
           </InfoMessage>
         </div>
       )}
-      <InputGroup
-        className='col-md-6'
-        component={
-          <>
-            {!Utils.getFlagsmithHasFeature('disable_users_as_reviewers') && (
-              <div className='mb-4'>
-                {hasApprovals ? (
-                  <div className='font-weight-medium mb-2'>Assigned users</div>
-                ) : (
-                  <SettingsButton onClick={() => setShowUsers(true)}>
-                    Assigned users
-                  </SettingsButton>
-                )}
-                <Row className='mt-2'>
-                  {ownerUsers.length !== 0 &&
-                    ownerUsers.map((u) => (
-                      <Row
-                        key={u.id}
-                        onClick={
-                          hasApprovals ? undefined : () => removeOwner(u.id)
-                        }
-                        className='chip'
-                        style={{
-                          marginBottom: 4,
-                          marginTop: 4,
-                        }}
-                      >
-                        <span className='font-weight-bold'>
-                          {u.first_name} {u.last_name}
-                        </span>
-                        {!hasApprovals && (
-                          <span className='chip-icon ion'>
-                            <IonIcon icon={close} />
-                          </span>
-                        )}
-                      </Row>
-                    ))}
-                </Row>
-                {!hasApprovals && (
-                  <UserSelect
-                    users={orgUsers}
-                    value={ownerUsers && ownerUsers.map((v) => v.id)}
-                    onAdd={addOwner}
-                    onRemove={removeOwner}
-                    isOpen={showUsers}
-                    onToggle={() => setShowUsers(!showUsers)}
-                  />
-                )}
-              </div>
+      <div className='col-md-6 form-group'>
+        {!Utils.getFlagsmithHasFeature('disable_users_as_reviewers') && (
+          <div className='mb-4'>
+            {hasApprovals ? (
+              <div className='font-weight-medium mb-2'>Assigned users</div>
+            ) : (
+              <SettingsButton onClick={() => setShowUsers(true)}>
+                Assigned users
+              </SettingsButton>
             )}
-            <div className='mb-4'>
-              {hasApprovals ? (
-                <div className='font-weight-medium mb-2'>Assigned groups</div>
-              ) : (
-                <SettingsButton onClick={() => setShowGroups(true)}>
-                  Assigned groups
-                </SettingsButton>
-              )}
-              <Row className='mt-2'>
-                {!!ownerGroups?.length &&
-                  ownerGroups.map((g) => (
-                    <Row
-                      key={g.id}
-                      onClick={
-                        hasApprovals
-                          ? undefined
-                          : () => removeOwner(g.id, false)
-                      }
-                      className='chip'
-                      style={{
-                        marginBottom: 4,
-                        marginTop: 4,
-                      }}
-                    >
-                      <span className='font-weight-bold'>{g.name}</span>
-                      {!hasApprovals && (
-                        <span className='chip-icon ion'>
-                          <IonIcon icon={close} />
-                        </span>
-                      )}
-                    </Row>
-                  ))}
-              </Row>
-              {!hasApprovals && (
-                <MyGroupsSelect
-                  orgId={AccountStore.getOrganisation().id}
-                  value={ownerGroups && ownerGroups.map((v) => v.id)}
-                  onAdd={addOwner}
-                  onRemove={removeOwner}
-                  isOpen={showGroups}
-                  onToggle={() => setShowGroups(!showGroups)}
-                />
-              )}
-            </div>
-          </>
-        }
-      />
+            <Row className='mt-2'>
+              {ownerUsers.length !== 0 &&
+                ownerUsers.map((u) => (
+                  <Row
+                    key={u.id}
+                    onClick={hasApprovals ? undefined : () => removeOwner(u.id)}
+                    className='chip'
+                    style={{
+                      marginBottom: 4,
+                      marginTop: 4,
+                    }}
+                  >
+                    <span className='font-weight-bold'>
+                      {u.first_name} {u.last_name}
+                    </span>
+                    {!hasApprovals && (
+                      <span className='chip-icon ion'>
+                        <IonIcon icon={close} />
+                      </span>
+                    )}
+                  </Row>
+                ))}
+            </Row>
+            {!hasApprovals && (
+              <UserSelect
+                users={orgUsers}
+                value={ownerUsers && ownerUsers.map((v) => v.id)}
+                onAdd={addOwner}
+                onRemove={removeOwner}
+                isOpen={showUsers}
+                onToggle={() => setShowUsers(!showUsers)}
+              />
+            )}
+          </div>
+        )}
+        <div className='mb-4'>
+          {hasApprovals ? (
+            <div className='font-weight-medium mb-2'>Assigned groups</div>
+          ) : (
+            <SettingsButton onClick={() => setShowGroups(true)}>
+              Assigned groups
+            </SettingsButton>
+          )}
+          <Row className='mt-2'>
+            {!!ownerGroups?.length &&
+              ownerGroups.map((g) => (
+                <Row
+                  key={g.id}
+                  onClick={
+                    hasApprovals ? undefined : () => removeOwner(g.id, false)
+                  }
+                  className='chip'
+                  style={{
+                    marginBottom: 4,
+                    marginTop: 4,
+                  }}
+                >
+                  <span className='font-weight-bold'>{g.name}</span>
+                  {!hasApprovals && (
+                    <span className='chip-icon ion'>
+                      <IonIcon icon={close} />
+                    </span>
+                  )}
+                </Row>
+              ))}
+          </Row>
+          {!hasApprovals && (
+            <MyGroupsSelect
+              orgId={AccountStore.getOrganisation().id}
+              value={ownerGroups && ownerGroups.map((v) => v.id)}
+              onAdd={addOwner}
+              onRemove={removeOwner}
+              isOpen={showGroups}
+              onToggle={() => setShowGroups(!showGroups)}
+            />
+          )}
+        </div>
+      </div>
 
       {DiffView}
       <JSONReference
diff --git a/frontend/web/components/pages/CreateEnvironmentPage.tsx b/frontend/web/components/pages/CreateEnvironmentPage.tsx
index 9034248fa89d..469448879b9d 100644
--- a/frontend/web/components/pages/CreateEnvironmentPage.tsx
+++ b/frontend/web/components/pages/CreateEnvironmentPage.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import { IonIcon } from '@ionic/react'
 import { close as closeIcon } from 'ionicons/icons'
 import ConfigProvider from 'common/providers/ConfigProvider'
@@ -18,6 +19,7 @@ import Utils from 'common/utils/utils'
 import { useHistory } from 'react-router-dom'
 import API from 'project/api'
 import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import { Environment, Role, User } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
 import UserSelect from 'components/UserSelect'
@@ -261,31 +263,28 @@ const CreateEnvironmentPage: React.FC = () => {
                       </CondensedRow>
                       <CondensedRow>
                         {!!project?.environments?.length && (
-                          <InputGroup
+                          <SelectField
                             tooltip='This will copy feature enabled states and remote config values from the selected environment.'
                             title='Clone from environment'
-                            component={
-                              <Select
-                                onChange={(env: { value: string }) => {
-                                  setSelectedEnv(
-                                    project?.environments.find(
-                                      (v) => v.api_key === env.value,
-                                    ),
-                                  )
-                                }}
-                                options={project.environments.map((env) => ({
-                                  label: env.name,
-                                  value: env.api_key,
-                                }))}
-                                value={
-                                  selectedEnv
-                                    ? {
-                                        label: selectedEnv.name,
-                                        value: selectedEnv.api_key,
-                                      }
-                                    : { label: 'Please select an environment' }
-                                }
-                              />
+                            onChange={(env) => {
+                              setSelectedEnv(
+                                project?.environments.find(
+                                  (v) => v.api_key === env?.value,
+                                ),
+                              )
+                            }}
+                            options={project.environments.map((env) => ({
+                              label: env.name,
+                              value: env.api_key,
+                            }))}
+                            placeholder='Please select an environment'
+                            value={
+                              selectedEnv
+                                ? {
+                                    label: selectedEnv.name,
+                                    value: selectedEnv.api_key,
+                                  }
+                                : null
                             }
                           />
                         )}
@@ -414,28 +413,27 @@ const CreateEnvironmentPage: React.FC = () => {
                       envContentType?.id && (
                         <CondensedRow>
                           <FormGroup className='mt-2 setting'>
-                            <InputGroup
-                              title='Custom fields'
-                              tooltip='You need to add a value to the custom field if it is required to successfully clone the environment'
-                              tooltipPlace='right'
-                              component={
-                                <AddMetadataToEntity
-                                  organisationId={
-                                    AccountStore.getOrganisation().id
-                                  }
-                                  projectId={projectId}
-                                  entityId={selectedEnv?.api_key}
-                                  envName={name}
-                                  entityContentType={envContentType.id}
-                                  entity={envContentType.model}
-                                  isCloningEnvironment
-                                  onChange={setMetadata}
-                                  setHasMetadataRequired={
-                                    setHasMetadataRequired
-                                  }
-                                />
-                              }
-                            />
+                            <div className='form-group'>
+                              <FieldLabel
+                                tooltip='You need to add a value to the custom field if it is required to successfully clone the environment'
+                                tooltipPlace='right'
+                              >
+                                Custom fields
+                              </FieldLabel>
+                              <AddMetadataToEntity
+                                organisationId={
+                                  AccountStore.getOrganisation().id
+                                }
+                                projectId={projectId}
+                                entityId={selectedEnv?.api_key}
+                                envName={name}
+                                entityContentType={envContentType.id}
+                                entity={envContentType.model}
+                                isCloningEnvironment
+                                onChange={setMetadata}
+                                setHasMetadataRequired={setHasMetadataRequired}
+                              />
+                            </div>
                           </FormGroup>
                         </CondensedRow>
                       )}
diff --git a/frontend/web/components/pages/CreateOrganisationPage.tsx b/frontend/web/components/pages/CreateOrganisationPage.tsx
index 8cc44e0bdb56..dbd26625090f 100644
--- a/frontend/web/components/pages/CreateOrganisationPage.tsx
+++ b/frontend/web/components/pages/CreateOrganisationPage.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import { useHistory } from 'react-router-dom'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
@@ -127,42 +128,37 @@ const CreateOrganisationPage: React.FC = () => {
             onChange={(e: InputEvent) => setName(Utils.safeParseEventValue(e))}
           />
           {showHostingPreferences && (
-            <InputGroup
-              inputProps={{ className: 'full-width', name: 'orgName' }}
-              title={
-                <div>
-                  What is your company's desired hosting option?{' '}
-                  <a
-                    className='text-action'
-                    href='https://docs.flagsmith.com/version-comparison'
-                    target='_blank'
-                    rel='noreferrer'
-                  >
-                    View Docs
-                  </a>
-                </div>
-              }
-              component={
-                <CheckboxGroup
-                  onChange={setHosting}
-                  selectedValues={hosting}
-                  items={[
-                    {
-                      label: 'Public SaaS (Multi Tenant)',
-                      value: 'public_saas',
-                    },
-                    {
-                      label: 'Private SaaS (Single Tenant)',
-                      value: 'private_saas',
-                    },
-                    {
-                      label: 'Self Hosted (in your own cloud)',
-                      value: 'self_hosted',
-                    },
-                  ]}
-                />
-              }
-            />
+            <div className='form-group'>
+              <FieldLabel>
+                What is your company's desired hosting option?{' '}
+                <a
+                  className='text-action'
+                  href='https://docs.flagsmith.com/version-comparison'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  View Docs
+                </a>
+              </FieldLabel>
+              <CheckboxGroup
+                onChange={setHosting}
+                selectedValues={hosting}
+                items={[
+                  {
+                    label: 'Public SaaS (Multi Tenant)',
+                    value: 'public_saas',
+                  },
+                  {
+                    label: 'Private SaaS (Single Tenant)',
+                    value: 'private_saas',
+                  },
+                  {
+                    label: 'Self Hosted (in your own cloud)',
+                    value: 'self_hosted',
+                  },
+                ]}
+              />
+            </div>
           )}
 
           <div className='text-right'>
diff --git a/frontend/web/components/pages/ReleaseManagerPage.tsx b/frontend/web/components/pages/ReleaseManagerPage.tsx
index b99cd9124ce8..9edd042ee78c 100644
--- a/frontend/web/components/pages/ReleaseManagerPage.tsx
+++ b/frontend/web/components/pages/ReleaseManagerPage.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useMemo, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import PageTitle from 'components/PageTitle'
-import InputGroup from 'components/base/forms/InputGroup'
 import { useRouteContext } from 'components/providers/RouteContext'
 import { useGetProjectsQuery } from 'common/services/useProject'
 import Icon from 'components/icons/Icon'
@@ -78,26 +78,27 @@ const ReleaseManagerPage: FC = () => {
       </PageTitle>
 
       <div className='mb-4'>
-        <InputGroup
-          title='Search Flags and Tags'
-          component={
-            <div className='d-flex gap-2'>
-              <input
-                className='input full-width'
-                name='search'
-                onKeyDown={handleKeyDown}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setSearchInput(e.target.value)
-                }
-                placeholder='Search for flags or tags across all projects...'
-                value={searchInput}
-              />
-              <Button onClick={handleSearch} disabled={isSearchDisabled}>
-                Search
-              </Button>
-            </div>
-          }
-        />
+        <div className='form-group'>
+          <FieldLabel htmlFor='release-manager-search'>
+            Search Flags and Tags
+          </FieldLabel>
+          <div className='d-flex gap-2'>
+            <input
+              id='release-manager-search'
+              className='input full-width'
+              name='search'
+              onKeyDown={handleKeyDown}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchInput(e.target.value)
+              }
+              placeholder='Search for flags or tags across all projects...'
+              value={searchInput}
+            />
+            <Button onClick={handleSearch} disabled={isSearchDisabled}>
+              Search
+            </Button>
+          </div>
+        </div>
       </div>
 
       {!hasSearched && (
diff --git a/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx b/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
index 1ae87d1c1b87..6c753f671cb0 100644
--- a/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
+++ b/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import ConfirmRemoveEnvironment from 'components/modals/ConfirmRemoveEnvironment'
 import ProjectStore from 'common/stores/project-store'
 import ConfigProvider from 'common/providers/ConfigProvider'
@@ -923,28 +924,29 @@ const EnvironmentSettingsPage: React.FC = () => {
                   {metadataEnable && environmentContentType?.id && (
                     <TabItem tabLabel='Custom Fields'>
                       <FormGroup className='mt-5 setting'>
-                        <InputGroup
-                          title={'Custom fields'}
-                          tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION(
-                            'environments',
-                          )}`}
-                          tooltipPlace='right'
-                          component={
-                            <AddMetadataToEntity
-                              organisationId={AccountStore.getOrganisation().id}
-                              projectId={projectId}
-                              entityId={currentEnv?.api_key ?? ''}
-                              envName={currentEnv?.name}
-                              entityContentType={environmentContentType?.id}
-                              entity={environmentContentType.model}
-                              onMetadataSave={(metadata) => {
-                                setCurrentEnv((prev) =>
-                                  prev ? { ...prev, metadata } : null,
-                                )
-                              }}
-                            />
-                          }
-                        />
+                        <div className='form-group'>
+                          <FieldLabel
+                            tooltip={`${Constants.strings.TOOLTIP_METADATA_DESCRIPTION(
+                              'environments',
+                            )}`}
+                            tooltipPlace='right'
+                          >
+                            Custom fields
+                          </FieldLabel>
+                          <AddMetadataToEntity
+                            organisationId={AccountStore.getOrganisation().id}
+                            projectId={projectId}
+                            entityId={currentEnv?.api_key ?? ''}
+                            envName={currentEnv?.name}
+                            entityContentType={environmentContentType?.id}
+                            entity={environmentContentType.model}
+                            onMetadataSave={(metadata) => {
+                              setCurrentEnv((prev) =>
+                                prev ? { ...prev, metadata } : null,
+                              )
+                            }}
+                          />
+                        </div>
                       </FormGroup>
                     </TabItem>
                   )}
diff --git a/frontend/web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx b/frontend/web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx
index 1fdfad37010b..b5c46acd484f 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx
@@ -1,5 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import Utils from 'common/utils/utils'
 import Switch from 'components/Switch'
 import ValueEditor from 'components/ValueEditor'
@@ -144,20 +146,20 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
         }}
         type='text'
       />
-      <InputGroup
-        className='mt-2 mb-4'
-        title='Allow IdP-initiated logins'
-        tooltip="Enable this to allow logins initiated by your identity provider. If disabled, users can only log in from Flagsmith's login page."
-        tooltipPlace='right'
-        component={
-          <Switch
-            checked={allowIdpInitiated || data?.allow_idp_initiated}
-            onChange={() => {
-              setAllowIdpInitiated(!allowIdpInitiated)
-            }}
-          />
-        }
-      />
+      <div className='form-group mt-2 mb-4'>
+        <FieldLabel
+          tooltip="Enable this to allow logins initiated by your identity provider. If disabled, users can only log in from Flagsmith's login page."
+          tooltipPlace='right'
+        >
+          Allow IdP-initiated logins
+        </FieldLabel>
+        <Switch
+          checked={allowIdpInitiated || data?.allow_idp_initiated}
+          onChange={() => {
+            setAllowIdpInitiated(!allowIdpInitiated)
+          }}
+        />
+      </div>
       <FormGroup className='mb-1'>
         <div className='mt-2 p-0'>
           <Row>
@@ -311,19 +313,16 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
       useCreateSamlAttributeMappingMutation()
     return (
       <div className='create-feature-tab mt-3'>
-        <InputGroup
+        <SelectField
           title={'Flagsmith user attribute'}
-          component={
-            <Select
-              value={djangoAttributeName}
-              placeholder='Select a Flagsmith user attribute'
-              options={samlAttributes}
-              onChange={(m: samlAttributeType) => {
-                setDjangoAttributeName(m)
-              }}
-              className='mb-4 react-select'
-            />
-          }
+          value={djangoAttributeName}
+          placeholder='Select a Flagsmith user attribute'
+          options={samlAttributes}
+          onChange={(m) => {
+            if (m) {
+              setDjangoAttributeName(m)
+            }
+          }}
         />
         <InputGroup
           className='mt-2'
diff --git a/frontend/web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx b/frontend/web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx
index 79fc81136e44..c0a56a9fa834 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/sso/scim/modals/ScimTokenModal.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import Button from 'components/base/forms/Button'
 import CopyField from 'components/CopyField'
-import InputGroup from 'components/base/forms/InputGroup'
 import WarningMessage from 'components/WarningMessage'
 
 type ScimTokenModalProps = {
@@ -19,17 +19,14 @@ const ScimTokenModal: FC<ScimTokenModalProps> = ({ token }) => {
   return (
     <>
       <WarningMessage warningMessage='Copy this token now — it cannot be retrieved later. Store it somewhere secure before closing this dialogue.' />
-      <InputGroup
-        title='SCIM bearer token'
-        className='mt-3'
-        component={
-          <CopyField
-            value={token}
-            className='font-monospace'
-            data-test='scim-token-value'
-          />
-        }
-      />
+      <div className='form-group mt-3'>
+        <FieldLabel>SCIM bearer token</FieldLabel>
+        <CopyField
+          value={token}
+          className='font-monospace'
+          data-test='scim-token-value'
+        />
+      </div>
       {isConfirming ? (
         <div className='mt-4 d-flex align-items-center justify-content-end gap-2'>
           <span className='me-auto text-muted'>
diff --git a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx
index bedd7fbd96ac..d3310618ddfc 100644
--- a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx
+++ b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/additional-settings/FeatureNameValidation.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import Setting from 'components/Setting'
 import RegexTester from 'components/RegexTester'
 import Utils from 'common/utils/utils'
@@ -120,46 +121,47 @@ export const FeatureNameValidation = ({
           transition: 'opacity 0.4s ease-in-out, height 0.4s ease-in-out',
         }}
       >
-        <InputGroup
-          title='Feature Name RegEx'
-          component={
-            <form onSubmit={handleSubmit}>
-              <Row>
-                <Flex>
-                  <Input
-                    ref={inputRef}
-                    value={featureNameRegex || ''}
-                    inputClassName='input input--wide'
-                    name='feature-name-regex'
-                    onClick={forceSelectionRange}
-                    onKeyUp={forceSelectionRange}
-                    showSuccess
-                    onChange={handleRegexChange}
-                    isValid={regexValid}
-                    type='text'
-                    placeholder='Regular Expression'
-                  />
-                </Flex>
-                <Button
-                  className='ml-2'
-                  type='submit'
-                  disabled={!regexValid || isSaving}
-                >
-                  Save
-                </Button>
-                <Button
-                  theme='text'
-                  type='button'
-                  onClick={openRegexTester}
-                  className='ml-2'
-                  disabled={!regexValid}
-                >
-                  Test RegEx
-                </Button>
-              </Row>
-            </form>
-          }
-        />
+        <div className='form-group'>
+          <FieldLabel htmlFor='feature-name-regex'>
+            Feature Name RegEx
+          </FieldLabel>
+          <form onSubmit={handleSubmit}>
+            <Row>
+              <Flex>
+                <Input
+                  ref={inputRef}
+                  value={featureNameRegex || ''}
+                  inputClassName='input input--wide'
+                  id='feature-name-regex'
+                  name='feature-name-regex'
+                  onClick={forceSelectionRange}
+                  onKeyUp={forceSelectionRange}
+                  showSuccess
+                  onChange={handleRegexChange}
+                  isValid={regexValid}
+                  type='text'
+                  placeholder='Regular Expression'
+                />
+              </Flex>
+              <Button
+                className='ml-2'
+                type='submit'
+                disabled={!regexValid || isSaving}
+              >
+                Save
+              </Button>
+              <Button
+                theme='text'
+                type='button'
+                onClick={openRegexTester}
+                className='ml-2'
+                disabled={!regexValid}
+              >
+                Test RegEx
+              </Button>
+            </Row>
+          </form>
+        </div>
       </div>
     </FormGroup>
   )
diff --git a/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx b/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
index debf86820033..43f409c73f3e 100644
--- a/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
+++ b/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
@@ -6,7 +6,7 @@ import {
 import { ReleasePipeline } from 'common/types/responses'
 import Utils from 'common/utils/utils'
 import Button from 'components/base/forms/Button'
-import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 
 type AddToReleasePipelineModalProps = {
   projectId: number
@@ -43,8 +43,8 @@ const AddToReleasePipelineModal = ({
     [releasePipelines],
   )
 
-  const handleSelect = (option: { label: string; value: number }) => {
-    setSelectedReleasePipeline(option.value)
+  const handleSelect = (option: { label: string; value: number } | null) => {
+    setSelectedReleasePipeline(option?.value ?? null)
   }
 
   const handleAddToReleasePipeline = () => {
@@ -74,18 +74,16 @@ const AddToReleasePipelineModal = ({
 
   return (
     <div className='p-4'>
-      <InputGroup
+      <SelectField
         title='Release Pipeline'
-        component={
-          <Select
-            options={releasePipelinesOptions}
-            onChange={handleSelect}
-            value={Utils.toSelectedValue(
-              selectedReleasePipeline,
-              releasePipelinesOptions,
-              { label: 'Select Release Pipeline', value: null },
-            )}
-          />
+        options={releasePipelinesOptions}
+        onChange={handleSelect}
+        placeholder='Select Release Pipeline'
+        value={
+          Utils.toSelectedValue(
+            selectedReleasePipeline,
+            releasePipelinesOptions,
+          ) ?? null
         }
       />
       <div className='text-right mt-4'>
diff --git a/frontend/web/components/release-pipelines/CreatePipelineStage.tsx b/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
index 4d48f4d454a0..84e479a5f843 100644
--- a/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
+++ b/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
@@ -1,6 +1,7 @@
 import { SyntheticEvent, useEffect, useMemo, useState } from 'react'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import Utils from 'common/utils/utils'
 import {
   StageActionBody,
@@ -128,7 +129,10 @@ const CreatePipelineStage = ({
     handleOnChange('actions', actions)
   }
 
-  const handleTriggerChange = (option: { value: string; label: string }) => {
+  const handleTriggerChange = (
+    option: { value: StageTriggerType; label: string } | null,
+  ) => {
+    if (!option) return
     handleOnChange('trigger', {
       trigger_body: null,
       trigger_type: option.value,
@@ -163,59 +167,37 @@ const CreatePipelineStage = ({
         />
       </FormGroup>
       <FormGroup>
-        <InputGroup
+        <SelectField
           title='Environment'
-          inputProps={{
-            error: hasNoFeatureVersioningEnvironments
+          error={
+            hasNoFeatureVersioningEnvironments
               ? 'No environments with feature versioning enabled'
-              : undefined,
-          }}
-          component={
-            <Select
-              styles={{
-                control: (base: any) => ({
-                  ...base,
-                  '&:hover': {
-                    borderColor: hasNoFeatureVersioningEnvironments
-                      ? '#ef4d56'
-                      : base.borderColor,
-                  },
-                  borderColor: hasNoFeatureVersioningEnvironments
-                    ? '#ef4d56'
-                    : base.borderColor,
-                  boxShadow: hasNoFeatureVersioningEnvironments
-                    ? '0 0 0 1px #ef4d56'
-                    : base.boxShadow,
-                }),
-              }}
-              value={Utils.toSelectedValue(
-                stageData.environment,
-                environmentWithFeatureVersioningOptions,
-              )}
-              isDisabled={isEnvironmentsLoading}
-              isLoading={isEnvironmentsLoading}
-              inputValue={searchInput}
-              onInputChange={setSearchInput}
-              options={environmentWithFeatureVersioningOptions}
-              onChange={(option: { value: number; label: string }) =>
-                handleOnChange('environment', option.value)
-              }
-            />
+              : undefined
           }
+          value={Utils.toSelectedValue(
+            stageData.environment,
+            environmentWithFeatureVersioningOptions,
+          )}
+          isDisabled={isEnvironmentsLoading}
+          isLoading={isEnvironmentsLoading}
+          inputValue={searchInput}
+          onInputChange={setSearchInput}
+          options={environmentWithFeatureVersioningOptions}
+          onChange={(option) => {
+            if (option) {
+              handleOnChange('environment', option.value)
+            }
+          }}
         />
       </FormGroup>
       <FormGroup>
-        <InputGroup
+        <SelectField
           title='Trigger'
-          component={
-            <Select
-              isDisabled={isEnvironmentsLoading}
-              isLoading={isEnvironmentsLoading}
-              value={selectedTrigger}
-              options={TRIGGER_OPTIONS}
-              onChange={handleTriggerChange}
-            />
-          }
+          isDisabled={isEnvironmentsLoading}
+          isLoading={isEnvironmentsLoading}
+          value={selectedTrigger}
+          options={TRIGGER_OPTIONS}
+          onChange={handleTriggerChange}
         />
       </FormGroup>
       {selectedTrigger?.value === StageTriggerType.WAIT_FOR && (
diff --git a/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx b/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
index fda7202eed55..d4e64f052b4e 100644
--- a/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
+++ b/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
@@ -1,6 +1,7 @@
 import { StageActionRequest } from 'common/types/requests'
 import Utils from 'common/utils/utils'
-import InputGroup from 'components/base/forms/InputGroup'
+import FieldLabel from 'components/base/forms/FieldLabel'
+import SelectField from 'components/base/forms/SelectField'
 import { FLAG_ACTION_OPTIONS } from './constants'
 import Icon from 'components/icons/Icon'
 import { StageActionBody, StageActionType } from 'common/types/responses'
@@ -79,77 +80,71 @@ const SinglePipelineStageAction = ({
         <div className='flex-1 and-divider__line' />
       </Row>
       <FormGroup className='mt-2'>
-        <InputGroup
-          title='Flag Action'
-          component={
-            <div className='d-flex align-items-center'>
-              <div className='w-100'>
-                <Select
-                  maxMenuHeight={180}
-                  value={Utils.toSelectedValue(
-                    getActionType(action),
-                    actionOptions,
-                    { label: 'Select an action', value: '' },
-                  )}
-                  options={actionOptions}
-                  onChange={(option: { value: string; label: string }) => {
-                    if (option.value.includes('TOGGLE_FEATURE')) {
-                      const isSegment = option.value.includes('FOR_SEGMENT')
-                      const enabled = !option.value.includes('DISABLE')
+        <div className='form-group'>
+          <FieldLabel htmlFor={`flag-action-${actionIndex}`}>
+            Flag Action
+          </FieldLabel>
+          <div className='d-flex align-items-center'>
+            <div className='w-100'>
+              <Select
+                inputId={`flag-action-${actionIndex}`}
+                maxMenuHeight={180}
+                placeholder='Select an action'
+                value={
+                  Utils.toSelectedValue(getActionType(action), actionOptions) ??
+                  null
+                }
+                options={actionOptions}
+                onChange={(option: { value: string; label: string }) => {
+                  if (option.value.includes('TOGGLE_FEATURE')) {
+                    const isSegment = option.value.includes('FOR_SEGMENT')
+                    const enabled = !option.value.includes('DISABLE')
 
-                      const action_type = isSegment
-                        ? StageActionType.TOGGLE_FEATURE_FOR_SEGMENT
-                        : StageActionType.TOGGLE_FEATURE
+                    const action_type = isSegment
+                      ? StageActionType.TOGGLE_FEATURE_FOR_SEGMENT
+                      : StageActionType.TOGGLE_FEATURE
 
-                      const action_body = { enabled }
+                    const action_body = { enabled }
 
-                      return onActionChange(
-                        actionIndex,
-                        action_type,
-                        action_body,
-                      )
-                    }
+                    return onActionChange(actionIndex, action_type, action_body)
+                  }
 
-                    return onActionChange(
-                      actionIndex,
-                      option.value as StageActionType,
-                      { enabled: true },
-                    )
-                  }}
-                />
-              </div>
-              {onRemoveAction && (
-                <div
-                  className='ml-2 clickable'
-                  onClick={() => onRemoveAction(actionIndex)}
-                >
-                  <Icon name='trash-2' width={20} fill='#8F98A3' />
-                </div>
-              )}
+                  return onActionChange(
+                    actionIndex,
+                    option.value as StageActionType,
+                    { enabled: true },
+                  )
+                }}
+              />
             </div>
-          }
-        />
+            {onRemoveAction && (
+              <div
+                className='ml-2 clickable'
+                onClick={() => onRemoveAction(actionIndex)}
+              >
+                <Icon name='trash-2' width={20} fill='#8F98A3' />
+              </div>
+            )}
+          </div>
+        </div>
       </FormGroup>
       {action?.action_type.includes('FOR_SEGMENT') && (
         <FormGroup className='pl-4'>
-          <InputGroup
+          <SelectField
             title='Segment'
-            component={
-              <Select
-                maxMenuHeight={180}
-                isDisabled={isSegmentsLoading}
-                isLoading={isSegmentsLoading}
-                value={Utils.toSelectedValue(
-                  getSegment(action),
-                  segmentOptions,
-                  { label: 'Select a segment', value: '' },
-                )}
-                options={segmentOptions}
-                onChange={(option: { value: number; label: string }) =>
-                  onSegmentChange(option, actionIndex)
-                }
-              />
+            maxMenuHeight={180}
+            isDisabled={isSegmentsLoading}
+            isLoading={isSegmentsLoading}
+            placeholder='Select a segment'
+            value={
+              Utils.toSelectedValue(getSegment(action), segmentOptions) ?? null
             }
+            options={segmentOptions}
+            onChange={(option) => {
+              if (option) {
+                onSegmentChange(option, actionIndex)
+              }
+            }}
           />
         </FormGroup>
       )}
diff --git a/frontend/web/components/tables/TableValueFilter.tsx b/frontend/web/components/tables/TableValueFilter.tsx
index 8c0c277c9a91..011a176bfd6e 100644
--- a/frontend/web/components/tables/TableValueFilter.tsx
+++ b/frontend/web/components/tables/TableValueFilter.tsx
@@ -2,6 +2,7 @@ import React, { FC, useEffect } from 'react'
 import TableFilter from './TableFilter'
 import Utils from 'common/utils/utils'
 import InputGroup from 'components/base/forms/InputGroup'
+import SelectField from 'components/base/forms/SelectField'
 import useDebouncedSearch from 'common/useDebouncedSearch'
 
 type TableFilterType = {
@@ -62,28 +63,25 @@ const TableTagFilter: FC<TableFilterType> = ({
       >
         <div className='inline-modal__list d-flex flex-column mx-0 py-0'>
           <div className='px-2 mt-2'>
-            <InputGroup
+            <SelectField
               title='Enabled State'
               className='mt-2'
-              component={
-                <Select
-                  size='select-xxsm'
-                  styles={{
-                    control: (base) => ({
-                      ...base,
-                      height: 18,
-                    }),
-                  }}
-                  onChange={(e: (typeof enabledOptions)[number]) => {
-                    onChange({
-                      enabled: e.value,
-                      valueSearch: value.valueSearch,
-                    })
-                  }}
-                  value={enabledOptions.find((v) => v.value === value.enabled)}
-                  options={enabledOptions}
-                />
-              }
+              size='select-xxsm'
+              styles={{
+                control: (base) => ({
+                  ...base,
+                  height: 18,
+                }),
+              }}
+              onChange={(e) => {
+                if (!e) return
+                onChange({
+                  enabled: e.value,
+                  valueSearch: value.valueSearch,
+                })
+              }}
+              value={enabledOptions.find((v) => v.value === value.enabled)}
+              options={enabledOptions}
             />
             <InputGroup
               title='Feature Value'
diff --git a/frontend/web/components/tags/CreateEditTag.tsx b/frontend/web/components/tags/CreateEditTag.tsx
index 866048a4a462..f350c7a6f5b7 100644
--- a/frontend/web/components/tags/CreateEditTag.tsx
+++ b/frontend/web/components/tags/CreateEditTag.tsx
@@ -1,4 +1,5 @@
 import React, { FC, KeyboardEvent, useEffect, useMemo, useState } from 'react'
+import FieldLabel from 'components/base/forms/FieldLabel'
 import { Tag as TTag } from 'common/types/responses'
 import Constants from 'common/constants'
 import Permission from 'common/providers/Permission'
@@ -188,23 +189,20 @@ const CreateEditTag: FC<CreateEditTagType> = ({
           have deletion protection.
         </Tooltip>
 
-        <InputGroup
-          title='Select a color'
-          component={
-            <Row className={'gap-3'}>
-              {Constants.tagColors.map((color) => (
-                <div key={color} className='tag--select'>
-                  <Tag
-                    onClick={(e: TTag) => update('color', e.color)}
-                    selected={tag?.color === color}
-                    tag={{ color }}
-                  />
-                </div>
-              ))}
-            </Row>
-          }
-          className='select-colour'
-        />
+        <div className='form-group select-colour'>
+          <FieldLabel>Select a color</FieldLabel>
+          <Row className={'gap-3'}>
+            {Constants.tagColors.map((color) => (
+              <div key={color} className='tag--select'>
+                <Tag
+                  onClick={(e: TTag) => update('color', e.color)}
+                  selected={tag?.color === color}
+                  tag={{ color }}
+                />
+              </div>
+            ))}
+          </Row>
+        </div>
         {existingTag && (
           <ErrorMessage error={'A tag already exists with this name'} />
         )}