From 476840428e5554b957c180a95ab12224e663325b Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 14:23:20 -0300
Subject: [PATCH 01/16] feat(forms): migrate Input to TypeScript

Convert Input.js to a typed function component (Input.tsx). React 19
ref-as-prop + useImperativeHandle for the E2E-guarded focus(); drop the
unused react-maskedinput dependency and the checkbox/radio delegation.
Unify the password/search icon widths and use the colorIconDanger token.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/base/forms/Input.js  | 237 -------------------
 frontend/web/components/base/forms/Input.tsx | 176 ++++++++++++++
 2 files changed, 176 insertions(+), 237 deletions(-)
 delete mode 100644 frontend/web/components/base/forms/Input.js
 create mode 100644 frontend/web/components/base/forms/Input.tsx

diff --git a/frontend/web/components/base/forms/Input.js b/frontend/web/components/base/forms/Input.js
deleted file mode 100644
index f00c39f82520..000000000000
--- a/frontend/web/components/base/forms/Input.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Created by kylejohnson on 30/07/2016.
- */
-import MaskedInput from 'react-maskedinput'
-import cn from 'classnames'
-import Icon from 'components/icons/Icon'
-import Radio from './Radio'
-import Checkbox from './Checkbox'
-
-const maskedCharacters = {
-  'a': {
-    validate(char) {
-      return /[ap]/.test(char)
-    },
-  },
-  'm': {
-    transform() {
-      return 'm'
-    },
-    validate(char) {
-      return /\w/.test(char)
-    },
-  },
-}
-
-const sizeClassNames = {
-  default: '',
-  large: 'input-lg',
-  small: 'input-sm',
-  xSmall: 'input-xsm',
-}
-
-const Input = class extends React.Component {
-  static displayName = 'Input'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      shouldValidate: !!this.props.value || this.props.autoValidate,
-      type: this.props.type,
-    }
-  }
-  onFocus = (e) => {
-    this.setState({
-      isFocused: true,
-    })
-    this.props.onFocus && this.props.onFocus(e)
-  }
-
-  focus = () => {
-    if (E2E) return
-    this.input.focus()
-  }
-
-  onKeyDown = (e) => {
-    if (Utils.keys.isEscape(e)) {
-      this.input.blur()
-    }
-    this.props.onKeyDown && this.props.onKeyDown(e)
-  }
-
-  validate = () => {
-    this.setState({
-      shouldValidate: true,
-    })
-  }
-
-  onBlur = (e) => {
-    this.setState({
-      isFocused: false,
-      shouldValidate: true,
-    })
-    this.props.onBlur && this.props.onBlur(e)
-  }
-
-  render() {
-    const {
-      centered,
-      disabled,
-      inputClassName,
-      isValid,
-      mask,
-      placeholderChar,
-      showSuccess,
-      size,
-      underline,
-      ...rest
-    } = this.props
-
-    const invalid = this.state.shouldValidate && !isValid
-    const success = isValid && showSuccess
-    const className = cn(
-      {
-        'focused': this.state.isFocused,
-        'input-container': true,
-        'input-underline': underline,
-        invalid,
-        'password': this.props.type === 'password',
-        'search': this.props.search,
-        success,
-      },
-      this.props.className,
-    )
-
-    const innerClassName = cn(
-      {
-        'input': true,
-        'text-center': centered,
-      },
-      inputClassName,
-      sizeClassNames[size],
-    )
-
-    if (this.props.type === 'checkbox') {
-      return (
-        <Checkbox
-          label={this.props.label}
-          value={this.props.value}
-          onChange={this.props.onChange}
-          checked={!!this.props.value}
-        />
-      )
-    } else if (this.props.type === 'radio') {
-      return (
-        <Radio
-          label={this.props.label}
-          value={this.props.value}
-          onChange={this.props.onChange}
-          checked={!!this.props.value}
-        />
-      )
-    }
-
-    return (
-      <div className={className}>
-        {mask ? (
-          <MaskedInput
-            ref={(c) => (this.input = c)}
-            {...rest}
-            mask={this.props.mask}
-            type={this.state.type}
-            formatCharacters={maskedCharacters}
-            onKeyDown={this.onKeyDown}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            className={innerClassName}
-            placeholderChar={placeholderChar}
-          />
-        ) : (
-          <input
-            ref={(c) => (this.input = c)}
-            {...rest}
-            onFocus={this.onFocus}
-            onKeyDown={this.onKeyDown}
-            type={this.state.type}
-            onBlur={this.onBlur}
-            value={this.props.value}
-            className={innerClassName}
-            disabled={disabled}
-            autoComplete={
-              this.props.enableAutoComplete ?? this.props.autocomplete
-            }
-          />
-        )}
-        {this.props.type === 'password' && (
-          <span
-            className={cn(
-              {
-                'clickable': true,
-                'input-icon-right': true,
-              },
-              sizeClassNames[size],
-            )}
-            onClick={() => {
-              if (!disabled) {
-                this.setState({
-                  type: this.state.type === 'password' ? 'text' : 'password',
-                })
-              }
-            }}
-          >
-            <Icon
-              name={this.state.type === 'password' ? 'eye' : 'eye-off'}
-              fill={invalid && '#ef4d56'}
-              width={
-                size &&
-                ((size === 'small' && 20) ||
-                  (size === 'xSmall' && 18) ||
-                  (size === 'large' && 24))
-              }
-            />
-          </span>
-        )}
-        {this.props.search && (
-          <span
-            className={cn(
-              {
-                'input-icon-right': true,
-              },
-              sizeClassNames[size],
-            )}
-          >
-            <Icon
-              name='search'
-              width={this.props.size === 'xSmall' ? 16 : 20}
-            />
-          </span>
-        )}
-      </div>
-    )
-  }
-}
-
-Input.defaultProps = {
-  className: '',
-  isValid: true,
-  placeholderChar: ' ',
-}
-
-Input.propTypes = {
-  autocomplete: propTypes.string,
-  centered: propTypes.bool,
-  className: propTypes.any,
-  inputClassName: OptionalString,
-  isValid: propTypes.any,
-  mask: OptionalString,
-  onBlur: OptionalFunc,
-  onFocus: OptionalFunc,
-  onKeyDown: OptionalFunc,
-  onSearchChange: OptionalFunc,
-  placeholderChar: OptionalString,
-  search: propTypes.Boolean,
-  size: OptionalString,
-  underline: propTypes.bool,
-}
-
-export default Input
diff --git a/frontend/web/components/base/forms/Input.tsx b/frontend/web/components/base/forms/Input.tsx
new file mode 100644
index 000000000000..5b63ec342081
--- /dev/null
+++ b/frontend/web/components/base/forms/Input.tsx
@@ -0,0 +1,176 @@
+import React, {
+  FocusEvent,
+  KeyboardEvent,
+  Ref,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import cn from 'classnames'
+import Icon from 'components/icons/Icon'
+import Utils from 'common/utils/utils'
+import { colorIconDanger } from 'common/theme/tokens'
+
+type InputSize = 'default' | 'large' | 'small' | 'xSmall'
+
+// Imperative API exposed via ref (React 19 ref-as-prop, no forwardRef).
+// focus() is a no-op under E2E, matching the original behaviour.
+export interface InputMethods {
+  focus: () => void
+}
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  autoValidate?: boolean
+  // Custom lowercase alias for the standard `autoComplete`, kept for back-compat.
+  autocomplete?: string
+  centered?: boolean
+  enableAutoComplete?: string
+  inputClassName?: string
+  isValid?: boolean
+  ref?: Ref<InputMethods>
+  search?: boolean
+  showSuccess?: boolean
+  size?: InputSize
+  underline?: boolean
+}
+
+const sizeClassNames: Record<InputSize, string> = {
+  default: '',
+  large: 'input-lg',
+  small: 'input-sm',
+  xSmall: 'input-xsm',
+}
+
+// Width of the password reveal / search icons per input size.
+const iconWidthBySize: Record<InputSize, number | undefined> = {
+  default: undefined,
+  large: 24,
+  small: 20,
+  xSmall: 18,
+}
+
+const Input: React.FC<InputProps> = ({
+  autoValidate,
+  autocomplete,
+  centered,
+  className = '',
+  disabled,
+  enableAutoComplete,
+  inputClassName,
+  isValid = true,
+  onBlur: onBlurProp,
+  onChange,
+  onFocus: onFocusProp,
+  onKeyDown: onKeyDownProp,
+  ref,
+  search,
+  showSuccess,
+  size,
+  type: typeProp,
+  underline,
+  value,
+  ...rest
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isFocused, setIsFocused] = useState(false)
+  const [shouldValidate, setShouldValidate] = useState(
+    !!value || !!autoValidate,
+  )
+  const [type, setType] = useState(typeProp)
+
+  // No-op under E2E to avoid programmatic focus stealing during tests; native
+  // autoFocus is unaffected. Matches the original Input.focus() behaviour.
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (E2E) return
+      inputRef.current?.focus()
+    },
+  }))
+
+  const onFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true)
+    onFocusProp?.(e)
+  }
+
+  const onBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false)
+    setShouldValidate(true)
+    onBlurProp?.(e)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (Utils.keys.isEscape(e)) {
+      e.currentTarget.blur()
+    }
+    onKeyDownProp?.(e)
+  }
+
+  const invalid = shouldValidate && !isValid
+  const success = isValid && showSuccess
+  const sizeClassName = size ? sizeClassNames[size] : ''
+  const containerClassName = cn(
+    {
+      'focused': isFocused,
+      'input-container': true,
+      'input-underline': underline,
+      invalid,
+      'password': typeProp === 'password',
+      'search': search,
+      success,
+    },
+    className,
+  )
+  const innerClassName = cn(
+    { 'input': true, 'text-center': centered },
+    inputClassName,
+    sizeClassName,
+  )
+  const iconWidth = size ? iconWidthBySize[size] : undefined
+
+  return (
+    <div className={containerClassName}>
+      <input
+        ref={inputRef}
+        {...rest}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        type={type}
+        onBlur={onBlur}
+        value={value}
+        className={innerClassName}
+        disabled={disabled}
+        autoComplete={enableAutoComplete ?? autocomplete}
+      />
+      {typeProp === 'password' && (
+        <span
+          className={cn(
+            { 'clickable': true, 'input-icon-right': true },
+            sizeClassName,
+          )}
+          onClick={() => {
+            if (!disabled) {
+              setType(type === 'password' ? 'text' : 'password')
+            }
+          }}
+        >
+          <Icon
+            name={type === 'password' ? 'eye' : 'eye-off'}
+            fill={invalid ? colorIconDanger : undefined}
+            width={iconWidth}
+          />
+        </span>
+      )}
+      {search && (
+        <span className={cn({ 'input-icon-right': true }, sizeClassName)}>
+          <Icon name='search' width={iconWidth} />
+        </span>
+      )}
+    </div>
+  )
+}
+
+Input.displayName = 'Input'
+
+export default Input

From 9506e609735696b8b40d1d0ac044dcb8cfeaced2 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 14:23:22 -0300
Subject: [PATCH 02/16] refactor(integrations): render Checkbox directly

Input no longer delegates type='checkbox' to Checkbox, so the single
caller uses <Checkbox> directly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../web/components/modals/CreateEditIntegrationModal.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/web/components/modals/CreateEditIntegrationModal.tsx b/frontend/web/components/modals/CreateEditIntegrationModal.tsx
index feec008ca93a..538a521f2990 100644
--- a/frontend/web/components/modals/CreateEditIntegrationModal.tsx
+++ b/frontend/web/components/modals/CreateEditIntegrationModal.tsx
@@ -11,6 +11,7 @@ import Project from 'common/project'
 import AccountStore from 'common/stores/account-store'
 import Utils from 'common/utils/utils'
 import Input from 'components/base/forms/Input'
+import Checkbox from 'components/base/forms/Checkbox'
 import {
   IntegrationData,
   IntegrationField,
@@ -397,12 +398,11 @@ const CreateEditIntegration: FC<CreateEditIntegrationProps> = (props) => {
     if (field.inputType === 'checkbox') {
       return (
         <div key={field.key} className='mt-3 mb-2'>
-          <Input
+          <Checkbox
             id={field.label.replace(/ /g, '')}
-            value={formData[field.key] ?? field.default}
             label={field.label}
-            onChange={(e: any) => update(field.key, e)}
-            type='checkbox'
+            checked={!!(formData[field.key] ?? field.default)}
+            onChange={(value) => update(field.key, value)}
           />
         </div>
       )

From 8098a184c06c5156ec22fec65f907fb784e6ccc9 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 14:23:23 -0300
Subject: [PATCH 03/16] fix(forms): update Input call sites for the typed
 component

Drop the bogus DOM InputEvent/KeyboardEvent annotations on Input
handlers (React infers the correct synthetic events) and fix a few
loose call sites surfaced by typing: JSX passed to the string title,
readonly->readOnly, non-boolean isValid, and a boolean value.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/BreadcrumbSeparator.tsx  | 16 +++++++---------
 .../web/components/ChangeRequestsSetting.tsx     |  2 +-
 frontend/web/components/GroupSelect.tsx          |  2 +-
 frontend/web/components/PermissionsTabs.tsx      |  8 ++------
 frontend/web/components/RolesSelect.tsx          |  2 +-
 .../web/components/import-export/ImportPage.tsx  |  4 +---
 .../inspect-permissions/InspectPermissions.tsx   |  4 +---
 .../inspect-permissions/ProjectPermissions.tsx   |  2 +-
 .../modals/CreateSegmentRulesTabForm.tsx         |  6 +++---
 .../web/components/pages/GitHubSetupPage.tsx     |  8 ++------
 .../components/pages/UsersAndPermissionsPage.tsx |  4 ++--
 .../components/pages/sdk-keys/SDKKeysPage.tsx    |  1 -
 .../Rule/components/RuleConditionValueInput.tsx  |  4 ++--
 .../web/components/tables/TableFilterOptions.tsx |  4 ++--
 .../web/components/tables/TableSearchFilter.tsx  |  2 +-
 .../web/components/tables/TableTagFilter.tsx     |  2 +-
 frontend/web/components/tags/AddEditTags.tsx     |  4 +---
 17 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/frontend/web/components/BreadcrumbSeparator.tsx b/frontend/web/components/BreadcrumbSeparator.tsx
index 1bee94c62a4e..bbd83e2b0127 100644
--- a/frontend/web/components/BreadcrumbSeparator.tsx
+++ b/frontend/web/components/BreadcrumbSeparator.tsx
@@ -198,7 +198,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
   )
 
   const navigateOrganisations = (
-    e: KeyboardEvent,
+    e: React.KeyboardEvent,
     organisations: Organisation[],
   ) => {
     const currentIndex = organisations
@@ -212,7 +212,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
   }
 
   const getNewIndex = (
-    e: KeyboardEvent,
+    e: React.KeyboardEvent,
     currentIndex: number,
     items: any[] | undefined,
     go: (item: any) => void,
@@ -237,7 +237,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
 
     return -1
   }
-  const navigateProjects = (e: KeyboardEvent) => {
+  const navigateProjects = (e: React.KeyboardEvent) => {
     const currentIndex = projects
       ? projects.findIndex((v) => `${v.id}` === `${hoveredProject}`)
       : -1
@@ -334,10 +334,8 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
             >
               <Input
                 autoFocus={focus === 'organisation'}
-                onKeyDown={(e: KeyboardEvent) =>
-                  navigateOrganisations(e, organisations)
-                }
-                onChange={(e: KeyboardEvent) => {
+                onKeyDown={(e) => navigateOrganisations(e, organisations)}
+                onChange={(e) => {
                   setOrganisationSearch(Utils.safeParseEventValue(e))
                 }}
                 search
@@ -390,11 +388,11 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
               )}
             >
               <Input
-                onChange={(e: InputEvent) => {
+                onChange={(e) => {
                   setProjectSearch(Utils.safeParseEventValue(e))
                 }}
                 autoFocus={focus === 'project'}
-                onKeyDown={(e: KeyboardEvent) => navigateProjects(e)}
+                onKeyDown={(e) => navigateProjects(e)}
                 search
                 className='full-width'
                 inputClassName='border-0 bg-transparent border-bottom-1'
diff --git a/frontend/web/components/ChangeRequestsSetting.tsx b/frontend/web/components/ChangeRequestsSetting.tsx
index fe886247c38e..a4c7141a66a5 100644
--- a/frontend/web/components/ChangeRequestsSetting.tsx
+++ b/frontend/web/components/ChangeRequestsSetting.tsx
@@ -46,7 +46,7 @@ const ChangeRequestsSetting: FC<ChangeRequestsSettingType> = ({
               name='env-name'
               disabled={isLoading}
               min={0}
-              onChange={(e: InputEvent) => {
+              onChange={(e) => {
                 if (!Utils.safeParseEventValue(e)) return
                 onChange(parseInt(Utils.safeParseEventValue(e)))
               }}
diff --git a/frontend/web/components/GroupSelect.tsx b/frontend/web/components/GroupSelect.tsx
index c2df9148f6fa..87f18bba4607 100644
--- a/frontend/web/components/GroupSelect.tsx
+++ b/frontend/web/components/GroupSelect.tsx
@@ -44,7 +44,7 @@ const GroupSelect: FC<GroupSelectType> = ({
       <Input
         disabled={disabled}
         value={filter}
-        onChange={(e: InputEvent) => setFilter(Utils.safeParseEventValue(e))}
+        onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Group'
         search
diff --git a/frontend/web/components/PermissionsTabs.tsx b/frontend/web/components/PermissionsTabs.tsx
index 3857234bb415..4748cace9933 100644
--- a/frontend/web/components/PermissionsTabs.tsx
+++ b/frontend/web/components/PermissionsTabs.tsx
@@ -110,9 +110,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
               type='text'
               className='ml-3'
               value={searchProject}
-              onChange={(e: InputEvent) =>
-                setSearchProject(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setSearchProject(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Projects'
               search
@@ -142,9 +140,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
               type='text'
               className='ml-3'
               value={searchEnv}
-              onChange={(e: InputEvent) =>
-                setSearchEnv(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setSearchEnv(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Environments'
               search
diff --git a/frontend/web/components/RolesSelect.tsx b/frontend/web/components/RolesSelect.tsx
index 737fd3abee58..f98b2327bae4 100644
--- a/frontend/web/components/RolesSelect.tsx
+++ b/frontend/web/components/RolesSelect.tsx
@@ -44,7 +44,7 @@ const RoleSelect: FC<RoleSelectType> = ({
       <Input
         disabled={disabled}
         value={filter}
-        onChange={(e: InputEvent) => setFilter(Utils.safeParseEventValue(e))}
+        onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Role'
         search
diff --git a/frontend/web/components/import-export/ImportPage.tsx b/frontend/web/components/import-export/ImportPage.tsx
index 415182fc7621..f4271b284248 100644
--- a/frontend/web/components/import-export/ImportPage.tsx
+++ b/frontend/web/components/import-export/ImportPage.tsx
@@ -130,9 +130,7 @@ const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
             <Input
               value={LDKey}
               name='ldkey'
-              onChange={(e: InputEvent) =>
-                setLDKey(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setLDKey(Utils.safeParseEventValue(e))}
               type='text'
               placeholder='My LaunchDarkly key'
             />
diff --git a/frontend/web/components/inspect-permissions/InspectPermissions.tsx b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
index ecb8e7f31117..09052fb06e6a 100644
--- a/frontend/web/components/inspect-permissions/InspectPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
@@ -81,9 +81,7 @@ const InspectPermissions: FC<InspectPermissionsType> = ({
               type='text'
               className='ml-3'
               value={searchEnv}
-              onChange={(e: InputEvent) =>
-                setSearchEnv(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setSearchEnv(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Environments'
               search
diff --git a/frontend/web/components/inspect-permissions/ProjectPermissions.tsx b/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
index 1b9c4f40d274..89ab477fabe4 100644
--- a/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
@@ -26,7 +26,7 @@ const ProjectPermissions = ({ userId }: { userId?: number }) => {
           type='text'
           className='ml-3='
           value={searchProject}
-          onChange={(e: InputEvent) => {
+          onChange={(e) => {
             setSearchProject(Utils.safeParseEventValue(e))
           }}
           size='small'
diff --git a/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
index aa0f8bc174ce..bf48efcb810f 100644
--- a/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
+++ b/frontend/web/components/modals/CreateSegmentRulesTabForm.tsx
@@ -139,7 +139,7 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
             id='segmentID'
             maxLength={SEGMENT_ID_MAXLENGTH}
             value={name}
-            onChange={(e: InputEvent) => {
+            onChange={(e) => {
               setValueChanged(true)
               setName(
                 Format.enumeration
@@ -147,7 +147,7 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
                   .toLowerCase(),
               )
             }}
-            isValid={name && name.length}
+            isValid={!!(name && name.length)}
             type='text'
             placeholder='E.g. power_users'
           />
@@ -162,7 +162,7 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
             name: 'featureDesc',
             readOnly: !!identity || readOnly,
           }}
-          onChange={(e: InputEvent) => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setValueChanged(true)
             setDescription(Utils.safeParseEventValue(e))
           }}
diff --git a/frontend/web/components/pages/GitHubSetupPage.tsx b/frontend/web/components/pages/GitHubSetupPage.tsx
index faa6974a3559..299c6a17134a 100644
--- a/frontend/web/components/pages/GitHubSetupPage.tsx
+++ b/frontend/web/components/pages/GitHubSetupPage.tsx
@@ -159,12 +159,8 @@ const GitHubSetupPage: FC<GitHubSetupPageType> = ({ location }) => {
             <Input
               value={repositoryOwner}
               data-test='repositoryOwner'
-              inputProps={{
-                name: 'repositoryOwner',
-              }}
-              onChange={(e: InputEvent) =>
-                setRepositoryOwner(Utils.safeParseEventValue(e))
-              }
+              name='repositoryOwner'
+              onChange={(e) => setRepositoryOwner(Utils.safeParseEventValue(e))}
               disabled
               type='text'
               title={'Repository Owner'}
diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
index e958bd489964..064c6b3327d3 100644
--- a/frontend/web/components/pages/UsersAndPermissionsPage.tsx
+++ b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
@@ -234,6 +234,7 @@ const UsersAndPermissionsInner: FC<UsersAndPermissionsInnerType> = ({
                               for your plan.{' '}
                               {usedSeats && (
                                 <>
+                                  {/* eslint-disable-next-line no-nested-ternary */}
                                   {overSeats &&
                                   (!verifySeatsLimit || !autoSeats) ? (
                                     <strong>
@@ -347,8 +348,7 @@ const UsersAndPermissionsInner: FC<UsersAndPermissionsInnerType> = ({
                                           data-test='invite-link'
                                           inputClassName='input input--wide'
                                           type='text'
-                                          readonly='readonly'
-                                          title={<h3>Link</h3>}
+                                          readOnly
                                           placeholder='Link'
                                           size='small'
                                         />
diff --git a/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx b/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx
index 604857c6b1ef..74d94ceee9a6 100644
--- a/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx
+++ b/frontend/web/components/pages/sdk-keys/SDKKeysPage.tsx
@@ -53,7 +53,6 @@ const SDKKeysPage: FC = () => {
               value={environmentId}
               inputClassName='input input--wide'
               type='text'
-              title={<h3>Client-side Environment Key</h3>}
               placeholder='Client-side Environment Key'
             />
           </Flex>
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
index 884aedaca4a4..418b46074a90 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
@@ -112,13 +112,13 @@ const RuleConditionValueInput: React.FC<RuleConditionValueInputProps> = ({
         data-test={props['data-test']}
         name='rule-condition-value-input'
         aria-label='Rule condition value input'
-        value={value}
+        value={typeof value === 'boolean' ? String(value) : value}
         className='w-100'
         inputClassName={
           showIcon ? `pr-5 ${hasWarning ? 'border-warning' : ''}` : ''
         }
         style={{ width: '100%' }}
-        onChange={(e: InputEvent) => {
+        onChange={(e) => {
           const value = Utils.safeParseEventValue(e)
           onChange?.(value)
         }}
diff --git a/frontend/web/components/tables/TableFilterOptions.tsx b/frontend/web/components/tables/TableFilterOptions.tsx
index bbce031fdd37..86aa64310584 100644
--- a/frontend/web/components/tables/TableFilterOptions.tsx
+++ b/frontend/web/components/tables/TableFilterOptions.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useMemo, useState } from 'react'
 import InlineModal from 'components/InlineModal'
 import { IonIcon } from '@ionic/react'
-import { caretDown, search } from 'ionicons/icons'
+import { caretDown } from 'ionicons/icons'
 import classNames from 'classnames'
 import TableFilterItem from './TableFilterItem'
 import Input from 'components/base/forms/Input'
@@ -82,7 +82,7 @@ const TableFilter: FC<TableFilterType> = ({
             <div className='px-2 mt-2 mb-2'>
               <Input
                 autoFocus
-                onChange={(e: InputEvent) => {
+                onChange={(e) => {
                   setFilter(Utils.safeParseEventValue(e))
                 }}
                 className='full-width'
diff --git a/frontend/web/components/tables/TableSearchFilter.tsx b/frontend/web/components/tables/TableSearchFilter.tsx
index e58833b3f663..31981fba4ba5 100644
--- a/frontend/web/components/tables/TableSearchFilter.tsx
+++ b/frontend/web/components/tables/TableSearchFilter.tsx
@@ -17,7 +17,7 @@ const TableSearchFilter: FC<TableFilterType> = ({ onChange, value }) => {
 
   return (
     <Input
-      onChange={(e: InputEvent) => {
+      onChange={(e) => {
         const v = Utils.safeParseEventValue(e)
         setLocalValue(v)
         debouncedOnChange(v)
diff --git a/frontend/web/components/tables/TableTagFilter.tsx b/frontend/web/components/tables/TableTagFilter.tsx
index 387c8f110290..8458ec01083f 100644
--- a/frontend/web/components/tables/TableTagFilter.tsx
+++ b/frontend/web/components/tables/TableTagFilter.tsx
@@ -104,7 +104,7 @@ const TableTagFilter: FC<TableFilterType> = ({
           <div className='px-2 my-2'>
             <Input
               autoFocus
-              onChange={(e: InputEvent) => {
+              onChange={(e) => {
                 setFilter(Utils.safeParseEventValue(e))
               }}
               className='full-width'
diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
index 774a048e491f..48a32447b7c5 100644
--- a/frontend/web/components/tags/AddEditTags.tsx
+++ b/frontend/web/components/tags/AddEditTags.tsx
@@ -169,9 +169,7 @@ const AddEditTags: FC<AddEditTagsType> = ({
                   submit()
                 }
               }}
-              onChange={(e: InputEvent) =>
-                setFilter(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
               size='xSmall'
               className='full-width'
               placeholder='Search tags...'

From 3f8c7e6abe2c5131def3cdb4eca7c0b410fd7d6d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 12 Jun 2026 08:32:40 -0300
Subject: [PATCH 04/16] refactor: import KeyboardEvent from react in
 BreadcrumbSeparator

Use the named React KeyboardEvent (matching Input.tsx) instead of the
React.KeyboardEvent namespace form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/BreadcrumbSeparator.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/web/components/BreadcrumbSeparator.tsx b/frontend/web/components/BreadcrumbSeparator.tsx
index bbd83e2b0127..8162ad01e72e 100644
--- a/frontend/web/components/BreadcrumbSeparator.tsx
+++ b/frontend/web/components/BreadcrumbSeparator.tsx
@@ -1,4 +1,11 @@
-import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
+import React, {
+  FC,
+  KeyboardEvent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { IonIcon } from '@ionic/react'
 import { checkmarkCircle, chevronDown, chevronUp } from 'ionicons/icons'
 import InlineModal from './InlineModal'
@@ -198,7 +205,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
   )
 
   const navigateOrganisations = (
-    e: React.KeyboardEvent,
+    e: KeyboardEvent,
     organisations: Organisation[],
   ) => {
     const currentIndex = organisations
@@ -212,7 +219,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
   }
 
   const getNewIndex = (
-    e: React.KeyboardEvent,
+    e: KeyboardEvent,
     currentIndex: number,
     items: any[] | undefined,
     go: (item: any) => void,
@@ -237,7 +244,7 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
 
     return -1
   }
-  const navigateProjects = (e: React.KeyboardEvent) => {
+  const navigateProjects = (e: KeyboardEvent) => {
     const currentIndex = projects
       ? projects.findIndex((v) => `${v.id}` === `${hoveredProject}`)
       : -1

From a6adb9e6bc2de665029132a04dd2d4042e888166 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 12 Jun 2026 08:34:10 -0300
Subject: [PATCH 05/16] feat(forms): add FieldLabel and FieldError primitives

FieldLabel wires a label to its control (+ required indicator + an info
tooltip via the shared LabelWithTooltip); FieldError renders an inline
per-field message (counterpart to the ErrorMessage banner). Widen
LabelWithTooltip's label to ReactNode. With Storybook stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/FieldError.stories.tsx         | 29 ++++++++++++
 .../components/FieldLabel.stories.tsx         | 33 +++++++++++++
 .../web/components/base/LabelWithTooltip.tsx  |  4 +-
 .../web/components/base/forms/FieldError.tsx  | 30 ++++++++++++
 .../web/components/base/forms/FieldLabel.tsx  | 46 +++++++++++++++++++
 5 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 frontend/documentation/components/FieldError.stories.tsx
 create mode 100644 frontend/documentation/components/FieldLabel.stories.tsx
 create mode 100644 frontend/web/components/base/forms/FieldError.tsx
 create mode 100644 frontend/web/components/base/forms/FieldLabel.tsx

diff --git a/frontend/documentation/components/FieldError.stories.tsx b/frontend/documentation/components/FieldError.stories.tsx
new file mode 100644
index 000000000000..bb22af48a9a1
--- /dev/null
+++ b/frontend/documentation/components/FieldError.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import FieldError from 'components/base/forms/FieldError'
+
+const meta: Meta<typeof FieldError> = {
+  component: FieldError,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/FieldError',
+}
+export default meta
+
+type Story = StoryObj<typeof FieldError>
+
+export const Default: Story = {
+  render: () => <FieldError error='This field is required.' />,
+}
+
+export const RichMessage: Story = {
+  render: () => (
+    <FieldError
+      error={
+        <>
+          Must be a valid <strong>email address</strong>.
+        </>
+      }
+    />
+  ),
+}
diff --git a/frontend/documentation/components/FieldLabel.stories.tsx b/frontend/documentation/components/FieldLabel.stories.tsx
new file mode 100644
index 000000000000..acfacaa19bd2
--- /dev/null
+++ b/frontend/documentation/components/FieldLabel.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import FieldLabel from 'components/base/forms/FieldLabel'
+
+const meta: Meta<typeof FieldLabel> = {
+  component: FieldLabel,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/FieldLabel',
+}
+export default meta
+
+type Story = StoryObj<typeof FieldLabel>
+
+export const Default: Story = {
+  render: () => <FieldLabel htmlFor='email'>Email</FieldLabel>,
+}
+
+export const Required: Story = {
+  render: () => (
+    <FieldLabel htmlFor='email' required>
+      Email
+    </FieldLabel>
+  ),
+}
+
+export const WithTooltip: Story = {
+  render: () => (
+    <FieldLabel htmlFor='email' tooltip='We never share your email.'>
+      Email
+    </FieldLabel>
+  ),
+}
diff --git a/frontend/web/components/base/LabelWithTooltip.tsx b/frontend/web/components/base/LabelWithTooltip.tsx
index 9b4fefa6b4a4..d15e289c826b 100644
--- a/frontend/web/components/base/LabelWithTooltip.tsx
+++ b/frontend/web/components/base/LabelWithTooltip.tsx
@@ -1,8 +1,8 @@
 import Icon from 'components/icons/Icon'
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 
 interface LabelWithTooltipProps {
-  label: string
+  label: ReactNode
   tooltip?: string
 }
 
diff --git a/frontend/web/components/base/forms/FieldError.tsx b/frontend/web/components/base/forms/FieldError.tsx
new file mode 100644
index 000000000000..932013109660
--- /dev/null
+++ b/frontend/web/components/base/forms/FieldError.tsx
@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+
+interface FieldErrorProps {
+  // The field-level error to show; renders nothing when falsy.
+  error?: ReactNode
+  // Set so the control can reference it via aria-describedby.
+  id?: string
+  className?: string
+}
+
+// Inline, per-field validation message shown beneath a control. The small-text
+// counterpart to ErrorMessage (which is a banner alert for API/form-level
+// errors) — use FieldError for a single field's validation.
+const FieldError: FC<FieldErrorProps> = ({ className, error, id }) => {
+  if (!error) {
+    return null
+  }
+  return (
+    <span
+      id={id}
+      className={cn('text-danger text-small d-block mt-1', className)}
+      role='alert'
+    >
+      {error}
+    </span>
+  )
+}
+
+export default FieldError
diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
new file mode 100644
index 000000000000..caff45cba86e
--- /dev/null
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -0,0 +1,46 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+import LabelWithTooltip from 'components/base/LabelWithTooltip'
+
+interface FieldLabelProps {
+  // Associates the label with its control; required for accessibility.
+  htmlFor?: string
+  children: ReactNode
+  // Shows a danger asterisk after the label.
+  required?: boolean
+  // When set, an info icon follows the label and reveals this text on hover.
+  tooltip?: string
+  className?: string
+}
+
+// The label for a form field — wires `htmlFor` to the control, with an optional
+// required indicator and an info-icon tooltip. The tooltip is rendered by the
+// shared LabelWithTooltip (which uses the DS Tooltip), not hand-rolled here.
+const FieldLabel: FC<FieldLabelProps> = ({
+  children,
+  className,
+  htmlFor,
+  required,
+  tooltip,
+}) => (
+  <label
+    htmlFor={htmlFor}
+    className={cn('control-label d-flex align-items-center', className)}
+  >
+    <LabelWithTooltip
+      label={
+        <>
+          {children}
+          {required && (
+            <span className='text-danger ml-1' aria-hidden>
+              *
+            </span>
+          )}
+        </>
+      }
+      tooltip={tooltip}
+    />
+  </label>
+)
+
+export default FieldLabel

From 5bfc3f6f324f1af1fc84b7c52b1164633e26dc8c Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 12 Jun 2026 08:40:28 -0300
Subject: [PATCH 06/16] refactor(forms): tokenise input colours in _input.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the legacy SCSS colour vars on the input field rules with semantic
tokens that flip per theme: borders -> --color-border-default/strong/action/
danger/disabled, text -> --color-text-default/secondary/tertiary/disabled,
backgrounds -> --color-surface-default. Datepicker/checkbox colours and the
_forms.scss input rules are left for the follow-up decomposition.

Note: the hover border now maps to --color-border-strong (.24) where it was
$basic-alpha-48 (.48) — slightly subtler; no exact .48 token exists.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/styles/components/_input.scss | 64 +++++++++++-----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/frontend/web/styles/components/_input.scss b/frontend/web/styles/components/_input.scss
index 104bf6c6f7ce..8df5a011e6b0 100644
--- a/frontend/web/styles/components/_input.scss
+++ b/frontend/web/styles/components/_input.scss
@@ -4,21 +4,21 @@ textarea {
   width: 100%;
   height: $textarea-height;
   outline: none;
-  border: 1px solid $input-border-color;
+  border: 1px solid var(--color-border-default);
   border-radius: $border-radius;
-  color: $body-color;
+  color: var(--color-text-default);
   line-height: $line-height-lg;
   padding: $input-padding;
   font-weight: $input-font-weight;
   &::placeholder {
-    color: $input-placeholder-color !important;
+    color: var(--color-text-tertiary) !important;
     font-weight: normal;
   }
   &:hover {
-    border-color: $basic-alpha-48;
+    border-color: var(--color-border-strong);
   }
   &:focus {
-    border-color: $primary;
+    border-color: var(--color-border-action);
   }
   &.textarea-lg {
     padding: $input-padding-lg;
@@ -33,7 +33,7 @@ textarea {
 .input-container.input-underline {
   input.input {
     border: none;
-    border-bottom: 1px solid $input-border-color;
+    border-bottom: 1px solid var(--color-border-default);
     border-radius: 0;
     background-color: transparent;
     padding-left: 8px;
@@ -41,11 +41,11 @@ textarea {
     // _forms.scss re-applies a full border shorthand on hover/focus.
     &:hover {
       border: none;
-      border-bottom: 1px solid $basic-alpha-48;
+      border-bottom: 1px solid var(--color-border-strong);
     }
     &:focus {
       border: none;
-      border-bottom: 1px solid $primary;
+      border-bottom: 1px solid var(--color-border-action);
     }
   }
   input[type='number'].input {
@@ -65,15 +65,15 @@ textarea {
 .dark .input-container.input-underline {
   input.input {
     border: none;
-    border-bottom: 1px solid $white-alpha-16;
+    border-bottom: 1px solid var(--color-border-default);
     background-color: transparent;
     &:hover {
       border: none;
-      border-bottom: 1px solid $white-alpha-48;
+      border-bottom: 1px solid var(--color-border-strong);
     }
     &:focus {
       border: none;
-      border-bottom: 1px solid $primary;
+      border-bottom: 1px solid var(--color-border-action);
     }
   }
 }
@@ -88,7 +88,7 @@ textarea {
   background-color: transparent !important;
   &.invalid hr,
   &.invalid hr.highlight {
-    border-color: $alert-danger-border-color;
+    border-color: var(--color-border-danger);
   }
 
   label {
@@ -108,7 +108,7 @@ textarea {
   input[type='text'],
   input[type='password'] {
     width: 100%;
-    border: 1px solid $input-border-color;
+    border: 1px solid var(--color-border-default);
     outline: none;
     box-shadow: none;
     background-image: none;
@@ -118,14 +118,14 @@ textarea {
     border-radius: $border-radius;
 
     &:read-only {
-      color: #777;
+      color: var(--color-text-secondary);
     }
     &:disabled {
-      border: 1px solid $basic-alpha-8;
-      color: $text-icon-light-grey;
+      border: 1px solid var(--color-border-disabled);
+      color: var(--color-text-disabled);
       & + .input-icon-right {
         path {
-          fill: $text-icon-light-grey;
+          fill: var(--color-text-disabled);
           opacity: $btn-disabled-opacity;
         }
       }
@@ -147,9 +147,9 @@ textarea {
     background-image: none;
     -webkit-appearance: none;
     background-image: none;
-    color: rgba(0, 0, 0, 0.870588);
+    color: var(--color-text-default);
     height: 100%;
-    background-color: $input-bg;
+    background-color: var(--color-surface-default);
     &::-webkit-input-placeholder {
       font-family: $font-family;
       font-weight: 400;
@@ -159,7 +159,7 @@ textarea {
   hr {
     border-bottom-width: 1px;
     border-style: none none solid;
-    border-color: $input-border-color;
+    border-color: var(--color-border-default);
     bottom: 8px;
     box-sizing: content-box;
     margin: 0px;
@@ -167,14 +167,14 @@ textarea {
     width: 100%;
     &.highlight {
       border-bottom-width: 2px;
-      border-color: $input-border-highlight-color;
+      border-color: var(--color-border-action);
       transform: scaleX(0);
       transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
     }
   }
 
   &.error hr {
-    border-color: $alert-danger-border-color;
+    border-color: var(--color-border-danger);
   }
 
   &.error,
@@ -191,22 +191,22 @@ textarea {
   input:-webkit-autofill,
   textarea:-webkit-autofill,
   select:-webkit-autofill {
-    background-color: $input-bg-dark;
-    color: $body-color-dark;
+    background-color: var(--color-surface-default);
+    color: var(--color-text-default);
   }
 }
 .dark textarea {
-  background-color: $input-bg-dark;
-  color: $body-color-dark;
-  border-color: $input-bg-dark;
+  background-color: var(--color-surface-default);
+  color: var(--color-text-default);
+  border-color: var(--color-surface-default);
   &::placeholder {
-    color: $input-placeholder-color-dark !important;
+    color: var(--color-text-tertiary) !important;
   }
   &:hover {
-    border-color: $white-alpha-8;
+    border-color: var(--color-border-strong);
   }
   &:focus {
-    border-color: $primary;
+    border-color: var(--color-border-action);
   }
 }
 
@@ -247,7 +247,7 @@ textarea {
   }
 }
 .react-datepicker-time__input input {
-  border: 1px solid $input-border-color;
+  border: 1px solid var(--color-border-default);
   padding: 2px;
   border-radius: $border-radius;
   color: white;
@@ -259,7 +259,7 @@ textarea {
 }
 .dark {
   .react-datepicker-time__input input {
-    border: 1px solid $input-border-color;
+    border: 1px solid var(--color-border-default);
     padding: 2px;
     border-radius: $border-radius;
     color: white;

From 418973aef9b3e6cb6a4f5c7ee48a6c9f9e51b1e8 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 12 Jun 2026 08:47:09 -0300
Subject: [PATCH 07/16] refactor(forms): tokenise input colours in _forms.scss

The active .input-container input.input rule (light + dark override) lived in
_forms.scss, so tokenise it to match _input.scss: borders ->
--color-border-default/strong/action/danger/success/disabled, text ->
--color-text-default/tertiary/disabled, bg -> --color-surface-default.

The dark override is kept (not removed) so dark hover/focus stay action-
coloured as before, rather than inheriting the light rule's --color-border-
strong hover. Non-input rules in this file (.label-switch, label) are untouched
pending the _forms.scss decomposition.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/styles/project/_forms.scss | 37 +++++++++++++------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/web/styles/project/_forms.scss b/frontend/web/styles/project/_forms.scss
index a304f2d521d1..c619243d7577 100644
--- a/frontend/web/styles/project/_forms.scss
+++ b/frontend/web/styles/project/_forms.scss
@@ -27,24 +27,27 @@
 .dark {
     .input-container {
         input.input {
-            border: 1px solid $input-hover-border-color-dark;
-            background-color: $input-bg-dark;
-            color: $text-icon-light;
+            border: 1px solid var(--color-border-default);
+            background-color: var(--color-surface-default);
+            color: var(--color-text-default);
+            // Dark hover/focus stay action-coloured (was $primary) — the light
+            // rule uses --color-border-strong on hover, so this override keeps
+            // the existing dark behaviour rather than inheriting it.
             &:hover {
-                border: 1px solid $input-focus-border-color-dark;
+                border: 1px solid var(--color-border-action);
             }
             &:focus {
-                border: 1px solid $input-focus-border-color-dark;
+                border: 1px solid var(--color-border-action);
             }
             &::placeholder {
-                color: $input-placeholder-color-dark;
+                color: var(--color-text-tertiary);
             }
             &:disabled {
-                border: 1px solid $black-alpha-32;
-                color: $text-icon-light-grey;
+                border: 1px solid var(--color-border-disabled);
+                color: var(--color-text-disabled);
                 & + .input-icon-right {
                     path {
-                        fill: $text-icon-light-grey;
+                        fill: var(--color-text-disabled);
                         opacity: $btn-disabled-opacity;
                     }
                 }
@@ -60,27 +63,27 @@
 .react-datepicker-wrapper .react-datepicker__input-container {
     &.invalid {
         input.input {
-            border-color: $danger !important;
+            border-color: var(--color-border-danger) !important;
         }
     }
     &.success {
         input.input {
-            border-color: $success !important;
+            border-color: var(--color-border-success) !important;
         }
     }
 
     input.input {
-        border: 1px solid $input-border-color;
-        background-color: $input-bg;
+        border: 1px solid var(--color-border-default);
+        background-color: var(--color-surface-default);
         @include transition(all 200ms);
         &:hover {
-            border: 1px solid $basic-alpha-48;
+            border: 1px solid var(--color-border-strong);
         }
         &:focus {
-            border: 1px solid $primary;
+            border: 1px solid var(--color-border-action);
         }
         border-radius: $border-radius;
-        color: $body-color;
+        color: var(--color-text-default);
         height: $input-height;
         line-height: $line-height-lg;
         padding: 12px 12px 12px 16px;
@@ -89,7 +92,7 @@
         }
 
         &::placeholder {
-            color: $input-placeholder-color;
+            color: var(--color-text-tertiary);
             font-weight: normal;
         }
 

From 37c4d6ae3615147282d60b16da9875972ccaba09 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 12:48:01 -0300
Subject: [PATCH 08/16] refactor(forms): fold info-icon tooltip into
 FieldLabel, drop LabelWithTooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FieldLabel now renders the info-icon tooltip itself (DS Tooltip) instead of
delegating to LabelWithTooltip. LabelWithTooltip had a single real consumer
(EnvironmentMetric), which is a display caption — not a form control — so it
can't adopt FieldLabel's <label htmlFor> semantics; it inlines the same tooltip
directly. LabelWithTooltip and its story are removed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/LabelWithTooltip.stories.tsx   | 57 -------------------
 .../web/components/base/LabelWithTooltip.tsx  | 26 ---------
 .../web/components/base/forms/FieldLabel.tsx  | 34 +++++------
 .../components/metrics/EnvironmentMetric.tsx  | 23 ++++++--
 4 files changed, 36 insertions(+), 104 deletions(-)
 delete mode 100644 frontend/documentation/components/LabelWithTooltip.stories.tsx
 delete mode 100644 frontend/web/components/base/LabelWithTooltip.tsx

diff --git a/frontend/documentation/components/LabelWithTooltip.stories.tsx b/frontend/documentation/components/LabelWithTooltip.stories.tsx
deleted file mode 100644
index be83075d66fb..000000000000
--- a/frontend/documentation/components/LabelWithTooltip.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from 'storybook'
-import { userEvent, waitFor } from 'storybook/test'
-
-import LabelWithTooltip from 'components/base/LabelWithTooltip'
-
-const meta: Meta<typeof LabelWithTooltip> = {
-  args: {
-    label: 'Server-side only',
-    tooltip: 'Prevent this feature from being accessed with client-side SDKs.',
-  },
-  component: LabelWithTooltip,
-  parameters: { layout: 'centered' },
-  title: 'Components/Forms/LabelWithTooltip',
-}
-export default meta
-
-type Story = StoryObj<typeof LabelWithTooltip>
-
-export const Default: Story = {}
-
-export const WithoutTooltip: Story = {
-  args: { label: 'Feature name', tooltip: undefined },
-}
-
-export const Hovered: Story = {
-  decorators: [
-    (StoryFn: React.ComponentType) => (
-      <div className='pt-5 pl-5 pr-5'>
-        <StoryFn />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: { story: 'Tooltip in its visible state.' },
-      story: { height: '200px' },
-    },
-  },
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    // Wait for the nested Tooltip's useEffect to register the
-    // react-tooltip anchor before hovering.
-    await new Promise((resolve) => setTimeout(resolve, 100))
-    const trigger =
-      canvasElement.querySelector<HTMLElement>('[data-tooltip-id]')
-    if (!trigger) return
-    await userEvent.hover(trigger)
-    await waitFor(
-      () => {
-        if (!document.body.querySelector('[role="tooltip"]')) {
-          throw new Error('tooltip popover not yet visible')
-        }
-      },
-      { timeout: 2000 },
-    )
-  },
-}
diff --git a/frontend/web/components/base/LabelWithTooltip.tsx b/frontend/web/components/base/LabelWithTooltip.tsx
deleted file mode 100644
index d15e289c826b..000000000000
--- a/frontend/web/components/base/LabelWithTooltip.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Icon from 'components/icons/Icon'
-import { FC, ReactNode } from 'react'
-
-interface LabelWithTooltipProps {
-  label: ReactNode
-  tooltip?: string
-}
-
-const LabelWithTooltip: FC<LabelWithTooltipProps> = ({ label, tooltip }) => {
-  return (
-    <>
-      {label}{' '}
-      {tooltip && (
-        <Tooltip
-          title={<Icon name='info-outlined' width={12} height={12} />}
-          place='top'
-          titleClassName='cursor-pointer'
-        >
-          {tooltip}
-        </Tooltip>
-      )}
-    </>
-  )
-}
-
-export default LabelWithTooltip
diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index caff45cba86e..d682cb93752a 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import cn from 'classnames'
-import LabelWithTooltip from 'components/base/LabelWithTooltip'
+import Icon from 'components/icons/Icon'
+import Tooltip from 'components/Tooltip'
 
 interface FieldLabelProps {
   // Associates the label with its control; required for accessibility.
@@ -14,8 +15,7 @@ interface FieldLabelProps {
 }
 
 // The label for a form field — wires `htmlFor` to the control, with an optional
-// required indicator and an info-icon tooltip. The tooltip is rendered by the
-// shared LabelWithTooltip (which uses the DS Tooltip), not hand-rolled here.
+// required indicator and an info-icon tooltip (rendered with the DS Tooltip).
 const FieldLabel: FC<FieldLabelProps> = ({
   children,
   className,
@@ -27,19 +27,21 @@ const FieldLabel: FC<FieldLabelProps> = ({
     htmlFor={htmlFor}
     className={cn('control-label d-flex align-items-center', className)}
   >
-    <LabelWithTooltip
-      label={
-        <>
-          {children}
-          {required && (
-            <span className='text-danger ml-1' aria-hidden>
-              *
-            </span>
-          )}
-        </>
-      }
-      tooltip={tooltip}
-    />
+    {children}
+    {required && (
+      <span className='text-danger ml-1' aria-hidden>
+        *
+      </span>
+    )}
+    {tooltip && (
+      <Tooltip
+        title={<Icon name='info-outlined' width={12} height={12} />}
+        place='top'
+        titleClassName='cursor-pointer ml-1'
+      >
+        {tooltip}
+      </Tooltip>
+    )}
   </label>
 )
 
diff --git a/frontend/web/components/metrics/EnvironmentMetric.tsx b/frontend/web/components/metrics/EnvironmentMetric.tsx
index 9aaea67760b0..1c351bcb5d33 100644
--- a/frontend/web/components/metrics/EnvironmentMetric.tsx
+++ b/frontend/web/components/metrics/EnvironmentMetric.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react'
 import { Link } from 'react-router-dom'
-import LabelWithTooltip from 'components/base/LabelWithTooltip'
+import Icon from 'components/icons/Icon'
+import Tooltip from 'components/Tooltip'
 interface EnvironmentMetricProps {
   label: string
   value: string | number
@@ -14,6 +15,20 @@ const EnvironmentMetric: FC<EnvironmentMetricProps> = ({
   tooltip,
   value,
 }) => {
+  const labelContent = (
+    <>
+      {label}
+      {tooltip && (
+        <Tooltip
+          title={<Icon name='info-outlined' width={12} height={12} />}
+          place='top'
+          titleClassName='cursor-pointer ml-1'
+        >
+          {tooltip}
+        </Tooltip>
+      )}
+    </>
+  )
   return (
     <div
       style={{
@@ -28,12 +43,10 @@ const EnvironmentMetric: FC<EnvironmentMetricProps> = ({
       <div className='d-flex items-center gap-1'>
         {link ? (
           <Link to={link} className='metric-label'>
-            <LabelWithTooltip label={label} tooltip={tooltip} />
+            {labelContent}
           </Link>
         ) : (
-          <p className='metric-label'>
-            <LabelWithTooltip label={label} tooltip={tooltip} />
-          </p>
+          <p className='metric-label'>{labelContent}</p>
         )}
       </div>
       <p className='metric-value'>{value}</p>

From 1993d97f35233c865c54bb2a971ab2dae25ae775 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 14:05:37 -0300
Subject: [PATCH 09/16] refactor(forms): migrate InputGroup to TypeScript

Convert InputGroup.js -> InputGroup.tsx as a function component (React 19
ref-as-prop; focus() via useImperativeHandle, useId for the field id). Export
InputSize from Input for the size prop.

The legacy escape-hatch props (isValid, onChange, inputProps) stay permissive to
match the existing usage across ~62 consumers, and dead top-level props that the
old class never forwarded (name, autocomplete, autoFocus, autoValidate, search,
rows) are accepted-but-ignored (@deprecated) to preserve behaviour without a
consumer-wide cleanup. Tightening these + removing the dead consumer props is a
follow-up.

Behaviour-preserving except dropping isValid off the raw <textarea> (it was an
invalid DOM attribute). No new errors in InputGroup's own type contract.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/base/forms/Input.tsx  |   2 +-
 .../web/components/base/forms/InputGroup.js   | 142 ------------
 .../web/components/base/forms/InputGroup.tsx  | 211 ++++++++++++++++++
 3 files changed, 212 insertions(+), 143 deletions(-)
 delete mode 100644 frontend/web/components/base/forms/InputGroup.js
 create mode 100644 frontend/web/components/base/forms/InputGroup.tsx

diff --git a/frontend/web/components/base/forms/Input.tsx b/frontend/web/components/base/forms/Input.tsx
index 5b63ec342081..941031f6f854 100644
--- a/frontend/web/components/base/forms/Input.tsx
+++ b/frontend/web/components/base/forms/Input.tsx
@@ -11,7 +11,7 @@ import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 import { colorIconDanger } from 'common/theme/tokens'
 
-type InputSize = 'default' | 'large' | 'small' | 'xSmall'
+export type InputSize = 'default' | 'large' | 'small' | 'xSmall'
 
 // Imperative API exposed via ref (React 19 ref-as-prop, no forwardRef).
 // focus() is a no-op under E2E, matching the original behaviour.
diff --git a/frontend/web/components/base/forms/InputGroup.js b/frontend/web/components/base/forms/InputGroup.js
deleted file mode 100644
index 564a30f5db6c..000000000000
--- a/frontend/web/components/base/forms/InputGroup.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * Created by kylejohnson on 25/07/2016.
- */
-import Icon from 'components/icons/Icon'
-import React, { Component } from 'react'
-
-const InputGroup = class extends Component {
-  static displayName = 'InputGroup'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {}
-  }
-
-  focus = () => {
-    this.input.focus()
-  }
-
-  render() {
-    const { props } = this
-    const id = this.props.id || Utils.GUID()
-    const { inputProps, size } = this.props
-    return (
-      <div
-        className={`${this.props.className ? this.props.className : ''} ${
-          this.props.noMargin ? '' : 'form-group'
-        }  ${this.props.isInvalid ? 'invalid' : ''}`}
-      >
-        {this.props.tooltip ? (
-          <Tooltip
-            title={
-              <label
-                htmlFor={id}
-                className='cols-sm-2 control-label cursor-pointer'
-              >
-                <div>
-                  {props.title}{' '}
-                  {!props.hideTooltipIcon && <Icon name='info-outlined' />}{' '}
-                  {props.unsaved && <div className='unread'>Unsaved</div>}
-                </div>
-              </label>
-            }
-            place={this.props.tooltipPlace || 'top'}
-          >
-            {this.props.tooltip}
-          </Tooltip>
-        ) : (
-          <Row>
-            {!!props.title && (
-              <Flex>
-                <label htmlFor={id} className='cols-sm-2 control-label'>
-                  <div>
-                    {props.title}{' '}
-                    {props.unsaved && <div className='unread'>Unsaved</div>}
-                  </div>
-                </label>
-              </Flex>
-            )}
-            {!!this.props.rightComponent && (
-              <div
-                style={{
-                  marginBottom: '0.5rem',
-                }}
-              >
-                {this.props.rightComponent}
-              </div>
-            )}
-          </Row>
-        )}
-
-        <div>
-          {this.props.component ? (
-            this.props.component
-          ) : (
-            <div>
-              {this.props.textarea ? (
-                <textarea
-                  ref={(c) => (this.input = c)}
-                  {...props.inputProps}
-                  isValid={props.isValid}
-                  disabled={props.disabled}
-                  value={props.value}
-                  defaultValue={props.defaultValue}
-                  data-test={props['data-test']}
-                  onChange={props.onChange}
-                  type={props.type || 'text'}
-                  id={id}
-                  placeholder={props.placeholder}
-                  onBlur={props.onBlur}
-                />
-              ) : (
-                <Input
-                  ref={(c) => (this.input = c)}
-                  {...props.inputProps}
-                  isValid={props.isValid}
-                  disabled={props.disabled}
-                  defaultValue={props.defaultValue}
-                  value={props.value}
-                  data-test={props['data-test']}
-                  onChange={props.onChange}
-                  type={props.type || 'text'}
-                  id={id}
-                  onBlur={props.onBlur}
-                  placeholder={props.placeholder}
-                  size={size}
-                />
-              )}
-            </div>
-          )}
-        </div>
-        {inputProps && inputProps.error && (
-          <span>
-            <span
-              id={props.inputProps.name ? `${props.inputProps.name}-error` : ''}
-              className='text-danger'
-            >
-              {typeof inputProps.error === 'string'
-                ? inputProps.error
-                : !!inputProps.error?.length &&
-                  inputProps.error.map((err, i) => <div key={i}>{err}</div>)}
-            </span>
-          </span>
-        )}
-      </div>
-    )
-  }
-}
-
-InputGroup.propTypes = {
-  disabled: OptionalBool,
-  hideTooltipIcon: OptionalBool,
-  inputProps: OptionalObject,
-  isValid: propTypes.any,
-  onChange: OptionalFunc,
-  placeholder: OptionalString,
-  size: OptionalString,
-  title: propTypes.any,
-  type: OptionalString,
-  value: OptionalString,
-}
-
-export default InputGroup
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
new file mode 100644
index 000000000000..7c9d554319f3
--- /dev/null
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -0,0 +1,211 @@
+import React, {
+  FC,
+  FocusEventHandler,
+  ReactNode,
+  Ref,
+  useId,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import cn from 'classnames'
+import Icon from 'components/icons/Icon'
+import { TooltipProps } from 'components/Tooltip'
+import Input, { InputProps, InputSize } from './Input'
+
+export interface InputGroupMethods {
+  focus: () => void
+}
+
+interface InputGroupProps {
+  className?: string
+  noMargin?: boolean
+  isInvalid?: boolean
+  id?: string
+  title?: ReactNode
+  tooltip?: string
+  tooltipPlace?: TooltipProps['place']
+  hideTooltipIcon?: boolean
+  unsaved?: boolean
+  rightComponent?: ReactNode
+  // 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.
+  isValid?: boolean | number | string | null
+  disabled?: boolean
+  value?: InputProps['value']
+  defaultValue?: InputProps['defaultValue']
+  // Legacy escape hatch: consumers annotate the event variously (Event,
+  // InputEvent, ChangeEvent), so this stays permissive.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?: (event: any) => void
+  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  type?: string
+  placeholder?: string
+  size?: InputSize
+  // Spread onto the underlying control; `error` is consumed here (not spread).
+  // Loosely typed to tolerate the legacy grab-bag of props consumers pass.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  inputProps?: Record<string, any> & {
+    error?: string | string[]
+    name?: string
+  }
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  name?: string
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  autocomplete?: string
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  autoFocus?: boolean
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  autoValidate?: boolean
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  search?: boolean
+  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
+  rows?: number
+  'data-test'?: string
+  ref?: Ref<InputGroupMethods>
+}
+
+const InputGroup: FC<InputGroupProps> = ({
+  className,
+  component,
+  'data-test': dataTest,
+  defaultValue,
+  disabled,
+  hideTooltipIcon,
+  id: idProp,
+  inputProps,
+  isInvalid,
+  isValid,
+  noMargin,
+  onBlur,
+  onChange,
+  placeholder,
+  ref,
+  rightComponent,
+  size,
+  textarea,
+  title,
+  tooltip,
+  tooltipPlace,
+  type,
+  unsaved,
+  value,
+}) => {
+  const generatedId = useId()
+  const id = idProp || generatedId
+  const inputRef = useRef<{ focus: () => void } | null>(null)
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+  }))
+
+  const { error, ...restInputProps } = inputProps ?? {}
+
+  return (
+    <div
+      className={cn(className, {
+        'form-group': !noMargin,
+        'invalid': !!isInvalid,
+      })}
+    >
+      {tooltip ? (
+        <Tooltip
+          title={
+            <label
+              htmlFor={id}
+              className='cols-sm-2 control-label cursor-pointer'
+            >
+              <div>
+                {title} {!hideTooltipIcon && <Icon name='info-outlined' />}{' '}
+                {unsaved && <div className='unread'>Unsaved</div>}
+              </div>
+            </label>
+          }
+          place={tooltipPlace || 'top'}
+        >
+          {tooltip}
+        </Tooltip>
+      ) : (
+        <Row>
+          {!!title && (
+            <Flex>
+              <label htmlFor={id} className='cols-sm-2 control-label'>
+                <div>
+                  {title} {unsaved && <div className='unread'>Unsaved</div>}
+                </div>
+              </label>
+            </Flex>
+          )}
+          {!!rightComponent && (
+            <div style={{ marginBottom: '0.5rem' }}>{rightComponent}</div>
+          )}
+        </Row>
+      )}
+
+      <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}
+                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}
+                onBlur={onBlur}
+                placeholder={placeholder}
+                size={size}
+              />
+            )}
+          </div>
+        )}
+      </div>
+      {error && (
+        <span>
+          <span
+            id={inputProps?.name ? `${inputProps.name}-error` : ''}
+            className='text-danger'
+          >
+            {typeof error === 'string'
+              ? error
+              : !!error?.length &&
+                error.map((err, i) => <div key={i}>{err}</div>)}
+          </span>
+        </span>
+      )}
+    </div>
+  )
+}
+
+InputGroup.displayName = 'InputGroup'
+
+export default InputGroup

From 92455d8b6d67fca25557471c8cfdb86dbc27faaf Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 14:10:20 -0300
Subject: [PATCH 10/16] refactor(forms): compose FieldLabel and FieldError in
 InputGroup

InputGroup now renders FieldLabel (label + info-icon tooltip) and FieldError
instead of hand-rolling them, and wires label -> control -> error off the useId
id: htmlFor / id / aria-describedby + aria-invalid, so screen readers announce
the field's error (previously the error id was name-based and nothing pointed at
it). FieldLabel gains a tooltipPlace prop so InputGroup's tooltipPlace survives.

Intentional behaviour changes across ~62 fields (Chromatic is skipped on the
draft, so these are unverified visually):
- tooltip hover target is the info icon only (was the whole label)
- field errors restyle via FieldError (text-small, d-block, mt-1, role=alert)
- errors are now associated with the control via aria-describedby/aria-invalid

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../web/components/base/forms/FieldLabel.tsx  |  7 +-
 .../web/components/base/forms/InputGroup.tsx  | 68 ++++++++-----------
 2 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index d682cb93752a..3d4f9d9fc10c 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import cn from 'classnames'
 import Icon from 'components/icons/Icon'
-import Tooltip from 'components/Tooltip'
+import Tooltip, { TooltipProps } from 'components/Tooltip'
 
 interface FieldLabelProps {
   // Associates the label with its control; required for accessibility.
@@ -11,6 +11,8 @@ interface FieldLabelProps {
   required?: boolean
   // When set, an info icon follows the label and reveals this text on hover.
   tooltip?: string
+  // Placement of the tooltip relative to the icon (defaults to 'top').
+  tooltipPlace?: TooltipProps['place']
   className?: string
 }
 
@@ -22,6 +24,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
   htmlFor,
   required,
   tooltip,
+  tooltipPlace = 'top',
 }) => (
   <label
     htmlFor={htmlFor}
@@ -36,7 +39,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
     {tooltip && (
       <Tooltip
         title={<Icon name='info-outlined' width={12} height={12} />}
-        place='top'
+        place={tooltipPlace}
         titleClassName='cursor-pointer ml-1'
       >
         {tooltip}
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index 7c9d554319f3..8c8246971bee 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -8,8 +8,9 @@ import React, {
   useRef,
 } from 'react'
 import cn from 'classnames'
-import Icon from 'components/icons/Icon'
 import { TooltipProps } from 'components/Tooltip'
+import FieldError from './FieldError'
+import FieldLabel from './FieldLabel'
 import Input, { InputProps, InputSize } from './Input'
 
 export interface InputGroupMethods {
@@ -101,6 +102,16 @@ const InputGroup: FC<InputGroupProps> = ({
   }))
 
   const { error, ...restInputProps } = inputProps ?? {}
+  // Wire label -> control -> error off the same id so screen readers announce
+  // the message for this field (htmlFor/id/aria-describedby all share `id`).
+  const errorId = `${id}-error`
+  const hasError = Array.isArray(error) ? error.length > 0 : !!error
+  let errorContent: ReactNode = null
+  if (typeof error === 'string') {
+    errorContent = error
+  } else if (Array.isArray(error) && error.length) {
+    errorContent = error.map((err, i) => <div key={i}>{err}</div>)
+  }
 
   return (
     <div
@@ -109,34 +120,19 @@ const InputGroup: FC<InputGroupProps> = ({
         'invalid': !!isInvalid,
       })}
     >
-      {tooltip ? (
-        <Tooltip
-          title={
-            <label
+      {(!!title || !!tooltip) && (
+        <Row>
+          <Flex>
+            <FieldLabel
               htmlFor={id}
-              className='cols-sm-2 control-label cursor-pointer'
+              className='cols-sm-2'
+              tooltip={hideTooltipIcon ? undefined : tooltip}
+              tooltipPlace={tooltipPlace}
             >
-              <div>
-                {title} {!hideTooltipIcon && <Icon name='info-outlined' />}{' '}
-                {unsaved && <div className='unread'>Unsaved</div>}
-              </div>
-            </label>
-          }
-          place={tooltipPlace || 'top'}
-        >
-          {tooltip}
-        </Tooltip>
-      ) : (
-        <Row>
-          {!!title && (
-            <Flex>
-              <label htmlFor={id} className='cols-sm-2 control-label'>
-                <div>
-                  {title} {unsaved && <div className='unread'>Unsaved</div>}
-                </div>
-              </label>
-            </Flex>
-          )}
+              {title}
+              {unsaved && <div className='unread'>Unsaved</div>}
+            </FieldLabel>
+          </Flex>
           {!!rightComponent && (
             <div style={{ marginBottom: '0.5rem' }}>{rightComponent}</div>
           )}
@@ -160,6 +156,8 @@ const InputGroup: FC<InputGroupProps> = ({
                 data-test={dataTest}
                 onChange={onChange}
                 id={id}
+                aria-invalid={hasError}
+                aria-describedby={hasError ? errorId : undefined}
                 placeholder={placeholder}
                 onBlur={onBlur}
               />
@@ -181,6 +179,8 @@ const InputGroup: FC<InputGroupProps> = ({
                 onChange={onChange}
                 type={type || 'text'}
                 id={id}
+                aria-invalid={hasError}
+                aria-describedby={hasError ? errorId : undefined}
                 onBlur={onBlur}
                 placeholder={placeholder}
                 size={size}
@@ -189,19 +189,7 @@ const InputGroup: FC<InputGroupProps> = ({
           </div>
         )}
       </div>
-      {error && (
-        <span>
-          <span
-            id={inputProps?.name ? `${inputProps.name}-error` : ''}
-            className='text-danger'
-          >
-            {typeof error === 'string'
-              ? error
-              : !!error?.length &&
-                error.map((err, i) => <div key={i}>{err}</div>)}
-          </span>
-        </span>
-      )}
+      <FieldError id={errorId} error={errorContent} />
     </div>
   )
 }

From b6ae7f97cd4c1808c362b15c63b06d4feee23434 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 14:24:45 -0300
Subject: [PATCH 11/16] refactor(forms): drop dead top-level props from
 InputGroup + consumers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InputGroup never forwarded top-level props (only inputProps), so name,
autocomplete, autoFocus, autoValidate, search and rows passed at the top level
were always ignored. Remove them from InputGroupProps and strip the ~32 dead
occurrences across the consumers. Behaviour-preserving — these props had no
effect; the real values come from inputProps. Slims the interface back down
after the migration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/RegexTester.tsx              |  2 --
 frontend/web/components/base/forms/InputGroup.tsx    | 12 ------------
 .../web/components/modals/ChangeEmailAddress.tsx     |  3 ---
 .../web/components/modals/ConfirmDeleteAccount.tsx   |  2 --
 frontend/web/components/modals/CreateGroup.tsx       |  2 --
 .../create-feature/components/FeatureNameInput.tsx   |  1 -
 .../components/onboarding/OnboardingAccountForm.tsx  |  1 -
 .../web/components/pages/AccountSettingsPage.tsx     |  9 ---------
 frontend/web/components/pages/HomePage.tsx           |  6 ------
 .../tabs/sso/saml/modals/CreateSAML.tsx              |  3 ---
 frontend/web/components/tables/TableValueFilter.tsx  |  4 +---
 frontend/web/components/tags/CreateEditTag.tsx       |  1 -
 12 files changed, 1 insertion(+), 45 deletions(-)

diff --git a/frontend/web/components/RegexTester.tsx b/frontend/web/components/RegexTester.tsx
index 62e7c11fb379..a8d64f70351b 100644
--- a/frontend/web/components/RegexTester.tsx
+++ b/frontend/web/components/RegexTester.tsx
@@ -43,7 +43,6 @@ const RegexTester: FC<RegexTesterType> = ({
       <InputGroup
         title='Regular Expression'
         value={regex}
-        autoValidate
         inputProps={{
           className: 'full-width',
           onClick: forceSelectionRange,
@@ -65,7 +64,6 @@ const RegexTester: FC<RegexTesterType> = ({
         id='regex'
         title='Test Input'
         value={exampleText}
-        autoValidate
         inputProps={{
           autoValidate: true,
           className: 'full-width',
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index 8c8246971bee..8ccbfc451911 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -52,18 +52,6 @@ interface InputGroupProps {
     error?: string | string[]
     name?: string
   }
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  name?: string
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  autocomplete?: string
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  autoFocus?: boolean
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  autoValidate?: boolean
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  search?: boolean
-  /** @deprecated legacy top-level prop, never forwarded — set via inputProps */
-  rows?: number
   'data-test'?: string
   ref?: Ref<InputGroupMethods>
 }
diff --git a/frontend/web/components/modals/ChangeEmailAddress.tsx b/frontend/web/components/modals/ChangeEmailAddress.tsx
index da200547e4b0..53a71e879aed 100644
--- a/frontend/web/components/modals/ChangeEmailAddress.tsx
+++ b/frontend/web/components/modals/ChangeEmailAddress.tsx
@@ -71,7 +71,6 @@ const ChangeEmailAddress: FC<ChangeEmailAddressType> = ({ onComplete }) => {
               }}
               isValid={email && email.length}
               type='email'
-              name='email'
               id='email'
               placeholder='E.g. email123@email.com'
             />
@@ -87,8 +86,6 @@ const ChangeEmailAddress: FC<ChangeEmailAddressType> = ({ onComplete }) => {
                 setPassword(Utils.safeParseEventValue(event))
               }}
               type='password'
-              autocomplete='current-password'
-              name='password'
             />
             {isError && (
               <ErrorMessage
diff --git a/frontend/web/components/modals/ConfirmDeleteAccount.tsx b/frontend/web/components/modals/ConfirmDeleteAccount.tsx
index b943b85df25f..4b8a12ceb392 100644
--- a/frontend/web/components/modals/ConfirmDeleteAccount.tsx
+++ b/frontend/web/components/modals/ConfirmDeleteAccount.tsx
@@ -113,7 +113,6 @@ const ConfirmDeleteAccount: FC<ConfirmDeleteAccountType> = ({
                 setCurrentEmail(Utils.safeParseEventValue(event))
               }}
               type='email'
-              name='currentEmail'
             />
           ) : (
             <InputGroup
@@ -128,7 +127,6 @@ const ConfirmDeleteAccount: FC<ConfirmDeleteAccountType> = ({
                 setPassword(Utils.safeParseEventValue(event))
               }}
               type='password'
-              name='password'
             />
           )}
           {(isMutationError || isEmailMismatchError) && (
diff --git a/frontend/web/components/modals/CreateGroup.tsx b/frontend/web/components/modals/CreateGroup.tsx
index c278dc8ca99f..7bf930b203df 100644
--- a/frontend/web/components/modals/CreateGroup.tsx
+++ b/frontend/web/components/modals/CreateGroup.tsx
@@ -223,7 +223,6 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
                   }}
                   isValid={name && name.length}
                   type='text'
-                  name='Name*'
                   placeholder='E.g. Developers'
                   className='mb-5'
                 />
@@ -244,7 +243,6 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
                   }}
                   isValid={name && name.length}
                   type='text'
-                  name='Name*'
                   placeholder='Add an optional external reference ID'
                   className='mb-5'
                 />
diff --git a/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx b/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
index 2a2d517dab37..107374da5249 100644
--- a/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
+++ b/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
@@ -30,7 +30,6 @@ const FeatureNameInput: FC<FeatureNameInputProps> = ({
   return (
     <FormGroup className='mb-4 mt-2'>
       <InputGroup
-        autoFocus={autoFocus}
         data-test='featureID'
         inputProps={{
           className: 'full-width',
diff --git a/frontend/web/components/onboarding/OnboardingAccountForm.tsx b/frontend/web/components/onboarding/OnboardingAccountForm.tsx
index a65819b907a1..1179ccee1902 100644
--- a/frontend/web/components/onboarding/OnboardingAccountForm.tsx
+++ b/frontend/web/components/onboarding/OnboardingAccountForm.tsx
@@ -100,7 +100,6 @@ const OnboardingAccountForm: FC<OnboardingAccountFormProps> = ({
             onChange={(e: FormEvent) => setFieldValue('password', e)}
             className='mb-0 full-width'
             type='password'
-            name='password'
             id='password'
           />
           <PasswordRequirements
diff --git a/frontend/web/components/pages/AccountSettingsPage.tsx b/frontend/web/components/pages/AccountSettingsPage.tsx
index b3ada04700e0..c3a580795c58 100644
--- a/frontend/web/components/pages/AccountSettingsPage.tsx
+++ b/frontend/web/components/pages/AccountSettingsPage.tsx
@@ -211,7 +211,6 @@ const AccountSettingsPage: FC = () => {
                     }}
                     value={email}
                     type='text'
-                    name='Email Address'
                   />
                   <div className='text-right'>
                     <Button
@@ -250,7 +249,6 @@ const AccountSettingsPage: FC = () => {
                 }
                 isValid={firstName && firstName.length}
                 type='text'
-                name='First Name*'
               />
               <InputGroup
                 className='mb-5'
@@ -264,7 +262,6 @@ const AccountSettingsPage: FC = () => {
                 onChange={(e: any) => setLastName(Utils.safeParseEventValue(e))}
                 isValid={lastName && lastName.length}
                 type='text'
-                name='Last Name*'
               />
               {error && <ErrorMessage>{error}</ErrorMessage>}
               <div className='text-right'>
@@ -367,8 +364,6 @@ const AccountSettingsPage: FC = () => {
                     }
                     isValid={currentPassword && currentPassword.length}
                     type='password'
-                    name='Current Password*'
-                    autocomplete='current-password'
                   />
                   <InputGroup
                     className='mt-4'
@@ -384,8 +379,6 @@ const AccountSettingsPage: FC = () => {
                     }
                     isValid={newPassword1 && newPassword1.length}
                     type='password'
-                    autocomplete='new-password'
-                    name='New Password*'
                   />
                   <InputGroup
                     className='mt-4'
@@ -401,8 +394,6 @@ const AccountSettingsPage: FC = () => {
                     }
                     isValid={newPassword2 && newPassword2.length}
                     type='password'
-                    autocomplete='new-password'
-                    name='Confirm New Password*'
                   />
                   {passwordError && (
                     <ErrorMessage>{passwordError}</ErrorMessage>
diff --git a/frontend/web/components/pages/HomePage.tsx b/frontend/web/components/pages/HomePage.tsx
index a575b45cda19..04876c87dfed 100644
--- a/frontend/web/components/pages/HomePage.tsx
+++ b/frontend/web/components/pages/HomePage.tsx
@@ -403,7 +403,6 @@ const HomePage: React.FC = () => {
                                     ) => setEmail(Utils.safeParseEventValue(e))}
                                     className='input-default full-width mb-4'
                                     type='text'
-                                    name='email'
                                     id='email'
                                   />
                                   <InputGroup
@@ -440,7 +439,6 @@ const HomePage: React.FC = () => {
                                     }
                                     className='input-default full-width mb-2'
                                     type='password'
-                                    name='password'
                                     data-test='password'
                                     id='password'
                                   />
@@ -589,7 +587,6 @@ const HomePage: React.FC = () => {
                                   }
                                   className='input-default full-width'
                                   type='text'
-                                  name='firstName'
                                   id='firstName'
                                 />
                                 <InputGroup
@@ -607,7 +604,6 @@ const HomePage: React.FC = () => {
                                   }
                                   className='input-default full-width'
                                   type='text'
-                                  name='lastName'
                                   id='lastName'
                                 />
                                 <InputGroup
@@ -624,7 +620,6 @@ const HomePage: React.FC = () => {
                                   ) => setEmail(Utils.safeParseEventValue(e))}
                                   className='input-default full-width'
                                   type='email'
-                                  name='email'
                                   id='email'
                                 />
                                 {isFreeEmailDomain(email) && (
@@ -649,7 +644,6 @@ const HomePage: React.FC = () => {
                                   }
                                   className='input-default full-width'
                                   type='password'
-                                  name='password'
                                   id='password'
                                 />
                                 <PasswordRequirements
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 04450ce60ff0..2b977cde7762 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
@@ -126,7 +126,6 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
           className: 'full-width',
         }}
         type='text'
-        name='Name*'
       />
 
       <InputGroup
@@ -144,7 +143,6 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
           name: 'groupName',
         }}
         type='text'
-        name='Frontend URL*'
       />
       <InputGroup
         className='mt-2 mb-4'
@@ -341,7 +339,6 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
             className: 'full-width',
           }}
           type='text'
-          name='Name*'
         />
         <div className='text-right'>
           <Button
diff --git a/frontend/web/components/tables/TableValueFilter.tsx b/frontend/web/components/tables/TableValueFilter.tsx
index 06583b90d408..8c0c277c9a91 100644
--- a/frontend/web/components/tables/TableValueFilter.tsx
+++ b/frontend/web/components/tables/TableValueFilter.tsx
@@ -44,6 +44,7 @@ const TableTagFilter: FC<TableFilterType> = ({
         valueSearch: search,
       })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search, value])
   return (
     <div className={isLoading ? 'disabled' : ''}>
@@ -86,7 +87,6 @@ const TableTagFilter: FC<TableFilterType> = ({
             />
             <InputGroup
               title='Feature Value'
-              autoFocus
               onChange={(e: InputEvent) => {
                 setSearchInput(Utils.safeParseEventValue(e))
               }}
@@ -94,12 +94,10 @@ const TableTagFilter: FC<TableFilterType> = ({
               inputProps={{ style: { height: 60 } }}
               value={searchInput}
               textarea
-              rows={2}
               className='full-width mt-2'
               type='text'
               size='xSmall'
               placeholder='Enter a feature value'
-              search
             />
           </div>
         </div>
diff --git a/frontend/web/components/tags/CreateEditTag.tsx b/frontend/web/components/tags/CreateEditTag.tsx
index 91bf6cb70f60..866048a4a462 100644
--- a/frontend/web/components/tags/CreateEditTag.tsx
+++ b/frontend/web/components/tags/CreateEditTag.tsx
@@ -161,7 +161,6 @@ const CreateEditTag: FC<CreateEditTagType> = ({
           className='mb-0'
           id='tag-label'
           data-test='tag-label'
-          autoFocus
           inputProps={{
             className: 'full-width mb-2',
             name: 'create-tag-name',

From 484f4cfc4f7b1e37dbdfe2ce0ea6f009311140ce Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 14:58:35 -0300
Subject: [PATCH 12/16] fix(forms): vertically centre FieldLabel's tooltip icon

The Tooltip wraps the icon in an inline span, so align-items-center on the
label centred the span but not the 12px svg inside it (control-label's
svg vertical-align + line-height pushed it off-centre). Make the trigger span
a centred flex box so the icon sits centred against the label text.
---
 frontend/web/components/base/forms/FieldLabel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index 3d4f9d9fc10c..5099e5b6496b 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -40,7 +40,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
       <Tooltip
         title={<Icon name='info-outlined' width={12} height={12} />}
         place={tooltipPlace}
-        titleClassName='cursor-pointer ml-1'
+        titleClassName='cursor-pointer ml-1 d-flex align-items-center'
       >
         {tooltip}
       </Tooltip>

From 73b37875f9df177a911f00aaf38ff623ef1f9665 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 15:11:41 -0300
Subject: [PATCH 13/16] docs(forms): add InputGroup Storybook story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Variant stories (default, tooltip, single/multiple errors, disabled, textarea,
unsaved, sizes, right component) for Chromatic coverage in light + dark — this
would have caught the tooltip-icon alignment regression.

To render in Storybook, import Row/Flex in InputGroup rather than relying on the
runtime globals (both are .tsx now), which also drops a legacy global dependency
per the standing TODO in .storybook/preview.js.
---
 .../components/InputGroup.stories.tsx         | 114 ++++++++++++++++++
 .../web/components/base/forms/InputGroup.tsx  |   2 +
 2 files changed, 116 insertions(+)
 create mode 100644 frontend/documentation/components/InputGroup.stories.tsx

diff --git a/frontend/documentation/components/InputGroup.stories.tsx b/frontend/documentation/components/InputGroup.stories.tsx
new file mode 100644
index 000000000000..2082056d99ac
--- /dev/null
+++ b/frontend/documentation/components/InputGroup.stories.tsx
@@ -0,0 +1,114 @@
+import React, { ComponentProps, useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import InputGroup from 'components/base/forms/InputGroup'
+
+// Stateful wrapper so the field is controlled in the story (InputGroup forwards
+// value/onChange to the underlying control).
+type FieldProps = ComponentProps<typeof InputGroup> & { initialValue?: string }
+
+const Field = ({ initialValue, ...props }: FieldProps) => {
+  const [value, setValue] = useState(initialValue ?? '')
+  return (
+    <InputGroup
+      {...props}
+      value={value}
+      onChange={(
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => setValue(e.target.value)}
+    />
+  )
+}
+
+const meta: Meta = {
+  decorators: [
+    (Story: React.FC) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { layout: 'centered' },
+  title: 'Components/Forms/InputGroup',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => <Field title='Email' placeholder='you@example.com' />,
+}
+
+// Info-icon tooltip after the label — the icon sits centred against the text.
+export const WithTooltip: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      tooltip='We never share your email.'
+      placeholder='you@example.com'
+    />
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      initialValue='not-an-email'
+      isValid={false}
+      inputProps={{ error: 'Enter a valid email address.', name: 'email' }}
+    />
+  ),
+}
+
+export const MultipleErrors: Story = {
+  render: () => (
+    <Field
+      title='Password'
+      type='password'
+      initialValue='abc'
+      isValid={false}
+      inputProps={{
+        error: ['At least 8 characters', 'Must include a number'],
+        name: 'password',
+      }}
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => <Field title='Email' initialValue='you@example.com' disabled />,
+}
+
+export const Textarea: Story = {
+  render: () => (
+    <Field textarea title='Description' initialValue='A short description…' />
+  ),
+}
+
+// "Unsaved" badge beside the label, used when a field has pending changes.
+export const Unsaved: Story = {
+  render: () => <Field title='Display name' unsaved initialValue='Jane' />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='d-flex flex-column gap-3'>
+      <Field size='large' title='Large' placeholder='Large' />
+      <Field title='Default' placeholder='Default' />
+      <Field size='small' title='Small' placeholder='Small' />
+      <Field size='xSmall' title='xSmall' placeholder='xSmall' />
+    </div>
+  ),
+}
+
+// A control rendered beside the label (e.g. a reset/regenerate action).
+export const WithRightComponent: Story = {
+  render: () => (
+    <Field
+      title='API key'
+      initialValue='sk_live_123'
+      rightComponent={<span className='text-primary'>Regenerate</span>}
+    />
+  ),
+}
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index 8ccbfc451911..12f66c8a3fdf 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -9,6 +9,8 @@ import React, {
 } from 'react'
 import cn from 'classnames'
 import { TooltipProps } from 'components/Tooltip'
+import Flex from 'components/base/grid/Flex'
+import Row from 'components/base/grid/Row'
 import FieldError from './FieldError'
 import FieldLabel from './FieldLabel'
 import Input, { InputProps, InputSize } from './Input'

From b6e527196f9f857ee29962e159c8aa64f5025d71 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 17:14:37 -0300
Subject: [PATCH 14/16] fix(forms): match prod label layout for tooltip icon
 and unsaved badge

FieldLabel was using d-flex on the label, which re-aligned the inline content
(unsaved badge sat off vs prod's baseline-inline placement). Drop flex from the
label so children flow inline like the original control-label, and centre the
tooltip icon via d-inline-flex on its trigger (stays inline + centred). Restore
the title->badge gap (ml-1) that the original {' '} provided.

Verified in Storybook (light + dark) against the prod look.
---
 frontend/web/components/base/forms/FieldLabel.tsx | 7 ++-----
 frontend/web/components/base/forms/InputGroup.tsx | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index 5099e5b6496b..ab0e70686aa1 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -26,10 +26,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
   tooltip,
   tooltipPlace = 'top',
 }) => (
-  <label
-    htmlFor={htmlFor}
-    className={cn('control-label d-flex align-items-center', className)}
-  >
+  <label htmlFor={htmlFor} className={cn('control-label', className)}>
     {children}
     {required && (
       <span className='text-danger ml-1' aria-hidden>
@@ -40,7 +37,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
       <Tooltip
         title={<Icon name='info-outlined' width={12} height={12} />}
         place={tooltipPlace}
-        titleClassName='cursor-pointer ml-1 d-flex align-items-center'
+        titleClassName='cursor-pointer ml-1 d-inline-flex align-items-center'
       >
         {tooltip}
       </Tooltip>
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index 12f66c8a3fdf..48ebd5cef080 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -120,7 +120,7 @@ const InputGroup: FC<InputGroupProps> = ({
               tooltipPlace={tooltipPlace}
             >
               {title}
-              {unsaved && <div className='unread'>Unsaved</div>}
+              {unsaved && <div className='unread ml-1'>Unsaved</div>}
             </FieldLabel>
           </Flex>
           {!!rightComponent && (

From 7581761ffca80f7ea2b178476dc292782d384191 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 17:27:27 -0300
Subject: [PATCH 15/16] docs(forms): use the real forgot-password example in
 InputGroup story

Mirror the login form's actual rightComponent usage (Forgot password link next
to the Password field) instead of a made-up API key example.
---
 .../components/InputGroup.stories.tsx             | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/documentation/components/InputGroup.stories.tsx b/frontend/documentation/components/InputGroup.stories.tsx
index 2082056d99ac..17a5726342f1 100644
--- a/frontend/documentation/components/InputGroup.stories.tsx
+++ b/frontend/documentation/components/InputGroup.stories.tsx
@@ -1,6 +1,7 @@
 import React, { ComponentProps, useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
+import Button from 'components/base/forms/Button'
 import InputGroup from 'components/base/forms/InputGroup'
 
 // Stateful wrapper so the field is controlled in the story (InputGroup forwards
@@ -102,13 +103,19 @@ export const Sizes: Story = {
   ),
 }
 
-// A control rendered beside the label (e.g. a reset/regenerate action).
+// An action rendered in the label row, right-aligned — as the login form does
+// with "Forgot password" next to the Password field.
 export const WithRightComponent: Story = {
   render: () => (
     <Field
-      title='API key'
-      initialValue='sk_live_123'
-      rightComponent={<span className='text-primary'>Regenerate</span>}
+      title='Password'
+      type='password'
+      initialValue='secret'
+      rightComponent={
+        <Button theme='text' type='button' className='fs-small float-end'>
+          Forgot password
+        </Button>
+      }
     />
   ),
 }

From 1838b3141293810ed633732e53be0124f3c90a20 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 15 Jun 2026 17:34:55 -0300
Subject: [PATCH 16/16] refactor(forms): move login Forgot-password below the
 field, drop rightComponent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The login form placed 'Forgot password' in the password field's label row via
InputGroup's rightComponent escape hatch — an uncommon pattern. Move it to a
right-aligned link below the field (the conventional placement). HomePage was
the sole rightComponent consumer, so remove the prop from InputGroup entirely
and its Storybook story.

Behaviour: same link/handler, just relocated. No E2E selects it by position.
---
 .../components/InputGroup.stories.tsx         | 18 ---------
 .../web/components/base/forms/InputGroup.tsx  |  5 ---
 frontend/web/components/pages/HomePage.tsx    | 37 +++++++++----------
 3 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/frontend/documentation/components/InputGroup.stories.tsx b/frontend/documentation/components/InputGroup.stories.tsx
index 17a5726342f1..78e9f751e9d4 100644
--- a/frontend/documentation/components/InputGroup.stories.tsx
+++ b/frontend/documentation/components/InputGroup.stories.tsx
@@ -1,7 +1,6 @@
 import React, { ComponentProps, useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
-import Button from 'components/base/forms/Button'
 import InputGroup from 'components/base/forms/InputGroup'
 
 // Stateful wrapper so the field is controlled in the story (InputGroup forwards
@@ -102,20 +101,3 @@ export const Sizes: Story = {
     </div>
   ),
 }
-
-// An action rendered in the label row, right-aligned — as the login form does
-// with "Forgot password" next to the Password field.
-export const WithRightComponent: Story = {
-  render: () => (
-    <Field
-      title='Password'
-      type='password'
-      initialValue='secret'
-      rightComponent={
-        <Button theme='text' type='button' className='fs-small float-end'>
-          Forgot password
-        </Button>
-      }
-    />
-  ),
-}
diff --git a/frontend/web/components/base/forms/InputGroup.tsx b/frontend/web/components/base/forms/InputGroup.tsx
index 48ebd5cef080..e0bfb74e33b1 100644
--- a/frontend/web/components/base/forms/InputGroup.tsx
+++ b/frontend/web/components/base/forms/InputGroup.tsx
@@ -29,7 +29,6 @@ interface InputGroupProps {
   tooltipPlace?: TooltipProps['place']
   hideTooltipIcon?: boolean
   unsaved?: boolean
-  rightComponent?: ReactNode
   // Render an arbitrary control instead of the default Input/textarea.
   component?: ReactNode
   textarea?: boolean
@@ -74,7 +73,6 @@ const InputGroup: FC<InputGroupProps> = ({
   onChange,
   placeholder,
   ref,
-  rightComponent,
   size,
   textarea,
   title,
@@ -123,9 +121,6 @@ const InputGroup: FC<InputGroupProps> = ({
               {unsaved && <div className='unread ml-1'>Unsaved</div>}
             </FieldLabel>
           </Flex>
-          {!!rightComponent && (
-            <div style={{ marginBottom: '0.5rem' }}>{rightComponent}</div>
-          )}
         </Row>
       )}
 
diff --git a/frontend/web/components/pages/HomePage.tsx b/frontend/web/components/pages/HomePage.tsx
index 04876c87dfed..19c1447b4daf 100644
--- a/frontend/web/components/pages/HomePage.tsx
+++ b/frontend/web/components/pages/HomePage.tsx
@@ -418,30 +418,29 @@ const HomePage: React.FC = () => {
                                     ) =>
                                       setPassword(Utils.safeParseEventValue(e))
                                     }
-                                    rightComponent={
-                                      !disableForgotPassword && (
-                                        <Link
-                                          tabIndex={-1}
-                                          className='float-end'
-                                          to={`/password-recovery${redirect}`}
-                                          onClick={showForgotPassword}
-                                        >
-                                          <Button
-                                            theme='text'
-                                            tabIndex={-1}
-                                            type='button'
-                                            className='fs-small'
-                                          >
-                                            Forgot password
-                                          </Button>
-                                        </Link>
-                                      )
-                                    }
                                     className='input-default full-width mb-2'
                                     type='password'
                                     data-test='password'
                                     id='password'
                                   />
+                                  {!disableForgotPassword && (
+                                    <div className='d-flex justify-content-end mb-2'>
+                                      <Link
+                                        tabIndex={-1}
+                                        to={`/password-recovery${redirect}`}
+                                        onClick={showForgotPassword}
+                                      >
+                                        <Button
+                                          theme='text'
+                                          tabIndex={-1}
+                                          type='button'
+                                          className='fs-small'
+                                        >
+                                          Forgot password
+                                        </Button>
+                                      </Link>
+                                    </div>
+                                  )}
                                   <div className='form-cta'>
                                     <Button
                                       id='login-btn'