From 02d7c78aff3fb81fb0136f515a8fd5821c07f044 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:47:32 -0300
Subject: [PATCH 01/13] feat(forms): add FieldLabel and FieldError primitives

FieldLabel wires a label to its control (+ required indicator); FieldError
renders an inline per-field validation message (the small-text counterpart
to the ErrorMessage banner). With Storybook stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/FieldError.stories.tsx         | 29 +++++++++++++++++
 .../components/FieldLabel.stories.tsx         | 25 +++++++++++++++
 .../web/components/base/forms/FieldError.tsx  | 24 ++++++++++++++
 .../web/components/base/forms/FieldLabel.tsx  | 32 +++++++++++++++++++
 4 files changed, 110 insertions(+)
 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..befc6ccbcff0
--- /dev/null
+++ b/frontend/documentation/components/FieldLabel.stories.tsx
@@ -0,0 +1,25 @@
+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>
+  ),
+}
diff --git a/frontend/web/components/base/forms/FieldError.tsx b/frontend/web/components/base/forms/FieldError.tsx
new file mode 100644
index 000000000000..34f51358338d
--- /dev/null
+++ b/frontend/web/components/base/forms/FieldError.tsx
@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+
+interface FieldErrorProps {
+  // The field-level error to show; renders nothing when falsy.
+  error?: ReactNode
+  className?: string
+}
+
+// Inline, per-field validation message shown beneath a control. This is 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 }) => {
+  if (!error) {
+    return null
+  }
+  return (
+    <span className={cn('text-danger text-small', 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..d5ec6ba1806a
--- /dev/null
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -0,0 +1,32 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+
+interface FieldLabelProps {
+  // Associates the label with its control; required for accessibility.
+  htmlFor?: string
+  children: ReactNode
+  // Shows a danger asterisk after the label.
+  required?: boolean
+  className?: string
+}
+
+// The label for a form field — wires `htmlFor` to the control and renders an
+// optional required indicator. Pair with FieldError + a control inside
+// InputField, or use standalone.
+const FieldLabel: FC<FieldLabelProps> = ({
+  children,
+  className,
+  htmlFor,
+  required,
+}) => (
+  <label htmlFor={htmlFor} className={cn('control-label', className)}>
+    {children}
+    {required && (
+      <span className='text-danger ml-1' aria-hidden>
+        *
+      </span>
+    )}
+  </label>
+)
+
+export default FieldLabel

From 84721d08cc6971f95ff9064bdf6a0aee88d4691c Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:47:34 -0300
Subject: [PATCH 02/13] feat(forms): add InputField

Composes FieldLabel + Input + FieldError into one labelled, validated
field. Controlled and library-agnostic (takes `error`); the typed
successor to InputGroup. With Storybook stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/InputField.stories.tsx         | 59 +++++++++++++++++++
 .../web/components/base/forms/InputField.tsx  | 57 ++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 frontend/documentation/components/InputField.stories.tsx
 create mode 100644 frontend/web/components/base/forms/InputField.tsx

diff --git a/frontend/documentation/components/InputField.stories.tsx b/frontend/documentation/components/InputField.stories.tsx
new file mode 100644
index 000000000000..8084c8b28d39
--- /dev/null
+++ b/frontend/documentation/components/InputField.stories.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import InputField from 'components/base/forms/InputField'
+
+const meta: Meta<typeof InputField> = {
+  component: InputField,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/InputField',
+}
+export default meta
+
+type Story = StoryObj<typeof InputField>
+
+const Interactive = () => {
+  const [value, setValue] = useState('')
+  return (
+    <InputField
+      label='Email'
+      placeholder='you@example.com'
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Interactive />,
+}
+
+export const Required: Story = {
+  render: () => (
+    <InputField label='Email' required placeholder='you@example.com' />
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <InputField
+      label='Email'
+      value='not-an-email'
+      error='Enter a valid email address.'
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => <InputField label='Email' disabled value='you@example.com' />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='d-flex flex-column gap-3'>
+      <InputField label='Default' placeholder='Default' />
+      <InputField label='Small' size='small' placeholder='Small' />
+      <InputField label='Extra small' size='xSmall' placeholder='Extra small' />
+    </div>
+  ),
+}
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
new file mode 100644
index 000000000000..d7c5aedc8751
--- /dev/null
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -0,0 +1,57 @@
+import React, { FC, ReactNode, Ref, useRef } from 'react'
+import cn from 'classnames'
+import Input, { InputMethods, InputProps } from './Input'
+import Utils from 'common/utils/utils'
+import FieldLabel from './FieldLabel'
+import FieldError from './FieldError'
+
+interface InputFieldProps extends Omit<InputProps, 'isValid'> {
+  // Field label; wired to the input via htmlFor/id.
+  label?: ReactNode
+  // Field-level error. When set, the input shows its invalid state and the
+  // message renders beneath it. Controlled — the consumer decides when an error
+  // is present, so this works with manual state or any form library.
+  error?: ReactNode
+  required?: boolean
+  // Styles the label/input/error wrapper; `inputClassName` styles the input.
+  wrapperClassName?: string
+  ref?: Ref<InputMethods>
+}
+
+// Composes FieldLabel + Input + FieldError into one labelled, validated field —
+// the typed successor to InputGroup. Presentational and library-agnostic: pass
+// `error` and it surfaces both the invalid styling and the message.
+const InputField: FC<InputFieldProps> = ({
+  error,
+  id,
+  label,
+  ref,
+  required,
+  wrapperClassName,
+  ...inputProps
+}) => {
+  const generatedId = useRef(Utils.GUID()).current
+  const fieldId = id ?? generatedId
+  return (
+    <div className={cn('form-group', wrapperClassName)}>
+      {label && (
+        <FieldLabel htmlFor={fieldId} required={required}>
+          {label}
+        </FieldLabel>
+      )}
+      <Input
+        {...inputProps}
+        id={fieldId}
+        ref={ref}
+        // Derive the input's invalid state from `error`. autoValidate shows it
+        // immediately (rather than after blur) to match the message; this maps
+        // to a controlled `invalid` prop once Input is slimmed.
+        isValid={!error}
+        autoValidate={!!error}
+      />
+      <FieldError error={error} />
+    </div>
+  )
+}
+
+export default InputField

From 68cb81ad17780befffb2b4f85a28e6fba3abf9a1 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:47:35 -0300
Subject: [PATCH 03/13] feat(forms): add PasswordInput and SearchInput

Composed inputs that will own the password reveal / search adornments.
Phase 1 delegates to Input; the adornment logic moves here when Input is
slimmed. With Storybook stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/PasswordInput.stories.tsx      | 32 ++++++++++++++++
 .../components/SearchInput.stories.tsx        | 38 +++++++++++++++++++
 .../components/base/forms/PasswordInput.tsx   | 16 ++++++++
 .../web/components/base/forms/SearchInput.tsx | 16 ++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 frontend/documentation/components/PasswordInput.stories.tsx
 create mode 100644 frontend/documentation/components/SearchInput.stories.tsx
 create mode 100644 frontend/web/components/base/forms/PasswordInput.tsx
 create mode 100644 frontend/web/components/base/forms/SearchInput.tsx

diff --git a/frontend/documentation/components/PasswordInput.stories.tsx b/frontend/documentation/components/PasswordInput.stories.tsx
new file mode 100644
index 000000000000..110323bba4b8
--- /dev/null
+++ b/frontend/documentation/components/PasswordInput.stories.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import PasswordInput from 'components/base/forms/PasswordInput'
+
+const meta: Meta<typeof PasswordInput> = {
+  component: PasswordInput,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/PasswordInput',
+}
+export default meta
+
+type Story = StoryObj<typeof PasswordInput>
+
+const Interactive = () => {
+  const [value, setValue] = useState('hunter2')
+  return (
+    <PasswordInput
+      placeholder='Password'
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Interactive />,
+}
+
+export const Disabled: Story = {
+  render: () => <PasswordInput value='hunter2' disabled />,
+}
diff --git a/frontend/documentation/components/SearchInput.stories.tsx b/frontend/documentation/components/SearchInput.stories.tsx
new file mode 100644
index 000000000000..09575220442b
--- /dev/null
+++ b/frontend/documentation/components/SearchInput.stories.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import SearchInput from 'components/base/forms/SearchInput'
+
+const meta: Meta<typeof SearchInput> = {
+  component: SearchInput,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/SearchInput',
+}
+export default meta
+
+type Story = StoryObj<typeof SearchInput>
+
+const Interactive = () => {
+  const [value, setValue] = useState('')
+  return (
+    <SearchInput
+      placeholder='Search…'
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Interactive />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='d-flex flex-column gap-3'>
+      <SearchInput placeholder='Default' />
+      <SearchInput size='small' placeholder='Small' />
+      <SearchInput size='xSmall' placeholder='Extra small' />
+    </div>
+  ),
+}
diff --git a/frontend/web/components/base/forms/PasswordInput.tsx b/frontend/web/components/base/forms/PasswordInput.tsx
new file mode 100644
index 000000000000..19e9bca28518
--- /dev/null
+++ b/frontend/web/components/base/forms/PasswordInput.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import Input, { InputProps } from './Input'
+
+// `type` and `search` are fixed by this component.
+type PasswordInputProps = Omit<InputProps, 'type' | 'search'>
+
+// Password field with a reveal (eye) toggle.
+//
+// Phase 1: composes Input, which still owns the toggle. This establishes the
+// component consumers migrate to; the toggle logic moves here when Input is
+// slimmed to a plain input (the wrapper-less redesign).
+const PasswordInput: FC<PasswordInputProps> = (props) => (
+  <Input {...props} type='password' />
+)
+
+export default PasswordInput
diff --git a/frontend/web/components/base/forms/SearchInput.tsx b/frontend/web/components/base/forms/SearchInput.tsx
new file mode 100644
index 000000000000..3ba44f1f9045
--- /dev/null
+++ b/frontend/web/components/base/forms/SearchInput.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import Input, { InputProps } from './Input'
+
+// `type` and `search` are fixed by this component.
+type SearchInputProps = Omit<InputProps, 'type' | 'search'>
+
+// Text input with a search (magnifying-glass) icon.
+//
+// Phase 1: composes Input, which still owns the icon. This establishes the
+// component consumers migrate to; the adornment moves here when Input is
+// slimmed to a plain input (the wrapper-less redesign).
+const SearchInput: FC<SearchInputProps> = (props) => (
+  <Input {...props} type='text' search />
+)
+
+export default SearchInput

From 2c4f9afd53df6466b66c34882286c0eb0e7ea34c Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:52:41 -0300
Subject: [PATCH 04/13] docs(forms): add missing Storybook variants for field
 components

PasswordInput sizes, SearchInput disabled, and InputField read-only +
no-label states. Dark mode is covered automatically by Chromatic's
global light/dark modes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../documentation/components/InputField.stories.tsx    | 10 ++++++++++
 .../documentation/components/PasswordInput.stories.tsx | 10 ++++++++++
 .../documentation/components/SearchInput.stories.tsx   |  6 ++++++
 3 files changed, 26 insertions(+)

diff --git a/frontend/documentation/components/InputField.stories.tsx b/frontend/documentation/components/InputField.stories.tsx
index 8084c8b28d39..1547d89f8dd9 100644
--- a/frontend/documentation/components/InputField.stories.tsx
+++ b/frontend/documentation/components/InputField.stories.tsx
@@ -57,3 +57,13 @@ export const Sizes: Story = {
     </div>
   ),
 }
+
+export const ReadOnly: Story = {
+  render: () => (
+    <InputField label='Environment key' readOnly value='ser.abc123' />
+  ),
+}
+
+export const WithoutLabel: Story = {
+  render: () => <InputField placeholder='No label' />,
+}
diff --git a/frontend/documentation/components/PasswordInput.stories.tsx b/frontend/documentation/components/PasswordInput.stories.tsx
index 110323bba4b8..2eb65cc3e9c0 100644
--- a/frontend/documentation/components/PasswordInput.stories.tsx
+++ b/frontend/documentation/components/PasswordInput.stories.tsx
@@ -30,3 +30,13 @@ export const Default: Story = {
 export const Disabled: Story = {
   render: () => <PasswordInput value='hunter2' disabled />,
 }
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='d-flex flex-column gap-3'>
+      <PasswordInput value='hunter2' placeholder='Default' />
+      <PasswordInput value='hunter2' size='small' placeholder='Small' />
+      <PasswordInput value='hunter2' size='xSmall' placeholder='Extra small' />
+    </div>
+  ),
+}
diff --git a/frontend/documentation/components/SearchInput.stories.tsx b/frontend/documentation/components/SearchInput.stories.tsx
index 09575220442b..5618be8ee7ac 100644
--- a/frontend/documentation/components/SearchInput.stories.tsx
+++ b/frontend/documentation/components/SearchInput.stories.tsx
@@ -36,3 +36,9 @@ export const Sizes: Story = {
     </div>
   ),
 }
+
+export const Disabled: Story = {
+  render: () => (
+    <SearchInput value='read-only' disabled placeholder='Search…' />
+  ),
+}

From 2ac87b3fb04f97ea1f4e2b09cff2ae82a945161d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:56:32 -0300
Subject: [PATCH 05/13] feat(forms): add label tooltip to FieldLabel and
 InputField

FieldLabel shows an info icon with a hover tooltip when `tooltip` is
passed (the recurring InputGroup pattern); InputField forwards it. With
Storybook stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/FieldLabel.stories.tsx         |  8 +++++++
 .../components/InputField.stories.tsx         | 10 +++++++++
 .../web/components/base/forms/FieldLabel.tsx  | 21 ++++++++++++++++---
 .../web/components/base/forms/InputField.tsx  |  5 ++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/documentation/components/FieldLabel.stories.tsx b/frontend/documentation/components/FieldLabel.stories.tsx
index befc6ccbcff0..acfacaa19bd2 100644
--- a/frontend/documentation/components/FieldLabel.stories.tsx
+++ b/frontend/documentation/components/FieldLabel.stories.tsx
@@ -23,3 +23,11 @@ export const Required: Story = {
     </FieldLabel>
   ),
 }
+
+export const WithTooltip: Story = {
+  render: () => (
+    <FieldLabel htmlFor='email' tooltip='We never share your email.'>
+      Email
+    </FieldLabel>
+  ),
+}
diff --git a/frontend/documentation/components/InputField.stories.tsx b/frontend/documentation/components/InputField.stories.tsx
index 1547d89f8dd9..63d49be3a7d3 100644
--- a/frontend/documentation/components/InputField.stories.tsx
+++ b/frontend/documentation/components/InputField.stories.tsx
@@ -67,3 +67,13 @@ export const ReadOnly: Story = {
 export const WithoutLabel: Story = {
   render: () => <InputField placeholder='No label' />,
 }
+
+export const WithTooltip: Story = {
+  render: () => (
+    <InputField
+      label='Email'
+      tooltip='We never share your email.'
+      placeholder='you@example.com'
+    />
+  ),
+}
diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index d5ec6ba1806a..86340ccad752 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 import cn from 'classnames'
+import Icon from 'components/icons/Icon'
 
 interface FieldLabelProps {
   // Associates the label with its control; required for accessibility.
@@ -7,17 +8,20 @@ interface FieldLabelProps {
   children: ReactNode
   // Shows a danger asterisk after the label.
   required?: boolean
+  // When set, an info icon follows the label and reveals this content on hover.
+  tooltip?: ReactNode
   className?: string
 }
 
-// The label for a form field — wires `htmlFor` to the control and renders an
-// optional required indicator. Pair with FieldError + a control inside
-// InputField, or use standalone.
+// The label for a form field — wires `htmlFor` to the control, with an optional
+// required indicator and an info-icon tooltip. Pair with FieldError + a control
+// inside InputField, or use standalone.
 const FieldLabel: FC<FieldLabelProps> = ({
   children,
   className,
   htmlFor,
   required,
+  tooltip,
 }) => (
   <label htmlFor={htmlFor} className={cn('control-label', className)}>
     {children}
@@ -26,6 +30,17 @@ const FieldLabel: FC<FieldLabelProps> = ({
         *
       </span>
     )}
+    {tooltip && (
+      <span className='ml-1'>
+        <Tooltip
+          title={<Icon name='info-outlined' width={16} height={16} />}
+          place='top'
+          titleClassName='cursor-pointer'
+        >
+          {tooltip}
+        </Tooltip>
+      </span>
+    )}
   </label>
 )
 
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index d7c5aedc8751..951b7d8e42e4 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -13,6 +13,8 @@ interface InputFieldProps extends Omit<InputProps, 'isValid'> {
   // is present, so this works with manual state or any form library.
   error?: ReactNode
   required?: boolean
+  // Info-icon tooltip shown next to the label.
+  tooltip?: ReactNode
   // Styles the label/input/error wrapper; `inputClassName` styles the input.
   wrapperClassName?: string
   ref?: Ref<InputMethods>
@@ -27,6 +29,7 @@ const InputField: FC<InputFieldProps> = ({
   label,
   ref,
   required,
+  tooltip,
   wrapperClassName,
   ...inputProps
 }) => {
@@ -35,7 +38,7 @@ const InputField: FC<InputFieldProps> = ({
   return (
     <div className={cn('form-group', wrapperClassName)}>
       {label && (
-        <FieldLabel htmlFor={fieldId} required={required}>
+        <FieldLabel htmlFor={fieldId} required={required} tooltip={tooltip}>
           {label}
         </FieldLabel>
       )}

From c084756ee45e9bd1f10b2ee8f57ecc4fff6f0d04 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 17:57:27 -0300
Subject: [PATCH 06/13] fix(forms): type FieldLabel/InputField tooltip as
 string

Tooltip's children is a string; match it (and LabelWithTooltip).

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

diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index 86340ccad752..cb0118dc23c9 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -8,8 +8,8 @@ interface FieldLabelProps {
   children: ReactNode
   // Shows a danger asterisk after the label.
   required?: boolean
-  // When set, an info icon follows the label and reveals this content on hover.
-  tooltip?: ReactNode
+  // When set, an info icon follows the label and reveals this text on hover.
+  tooltip?: string
   className?: string
 }
 
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index 951b7d8e42e4..aed2c155529f 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -13,8 +13,8 @@ interface InputFieldProps extends Omit<InputProps, 'isValid'> {
   // is present, so this works with manual state or any form library.
   error?: ReactNode
   required?: boolean
-  // Info-icon tooltip shown next to the label.
-  tooltip?: ReactNode
+  // Info-icon tooltip text shown next to the label.
+  tooltip?: string
   // Styles the label/input/error wrapper; `inputClassName` styles the input.
   wrapperClassName?: string
   ref?: Ref<InputMethods>

From 99bd9ec180998b0281d5e81683874fa96e7b0860 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:00:50 -0300
Subject: [PATCH 07/13] feat(forms): add generic Field wrapper, refactor
 InputField onto it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Field composes FieldLabel (+ tooltip/required) + any control + FieldError —
the control-agnostic foundation that replaces InputGroup's component slot.
InputField is now Field specialised to Input.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/Field.stories.tsx              | 58 +++++++++++++++++++
 frontend/web/components/base/forms/Field.tsx  | 44 ++++++++++++++
 .../web/components/base/forms/InputField.tsx  | 27 +++++----
 3 files changed, 115 insertions(+), 14 deletions(-)
 create mode 100644 frontend/documentation/components/Field.stories.tsx
 create mode 100644 frontend/web/components/base/forms/Field.tsx

diff --git a/frontend/documentation/components/Field.stories.tsx b/frontend/documentation/components/Field.stories.tsx
new file mode 100644
index 000000000000..3e9f39e1482d
--- /dev/null
+++ b/frontend/documentation/components/Field.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Field from 'components/base/forms/Field'
+import Input from 'components/base/forms/Input'
+
+const meta: Meta<typeof Field> = {
+  component: Field,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/Field',
+}
+export default meta
+
+type Story = StoryObj<typeof Field>
+
+export const Default: Story = {
+  render: () => (
+    <Field label='Email' htmlFor='field-default'>
+      <Input id='field-default' placeholder='you@example.com' />
+    </Field>
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <Field label='Email' htmlFor='field-error' error='Enter a valid email.'>
+      <Input id='field-error' value='nope' isValid={false} autoValidate />
+    </Field>
+  ),
+}
+
+export const RequiredWithTooltip: Story = {
+  render: () => (
+    <Field
+      label='Email'
+      htmlFor='field-required'
+      required
+      tooltip='We never share your email.'
+    >
+      <Input id='field-required' placeholder='you@example.com' />
+    </Field>
+  ),
+}
+
+// Field wraps any control, not just Input (this replaces InputGroup's
+// `component=`).
+export const CustomControl: Story = {
+  render: () => (
+    <Field label='Notes' htmlFor='field-custom'>
+      <textarea
+        id='field-custom'
+        className='input full-width'
+        rows={3}
+        placeholder='Any control goes here'
+      />
+    </Field>
+  ),
+}
diff --git a/frontend/web/components/base/forms/Field.tsx b/frontend/web/components/base/forms/Field.tsx
new file mode 100644
index 000000000000..0ede74a3c5fb
--- /dev/null
+++ b/frontend/web/components/base/forms/Field.tsx
@@ -0,0 +1,44 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+import FieldLabel from './FieldLabel'
+import FieldError from './FieldError'
+
+interface FieldProps {
+  // The control this field wraps — an Input, Select, textarea, or anything.
+  children: ReactNode
+  label?: ReactNode
+  // Field-level error; shows the message beneath the control when set.
+  error?: ReactNode
+  required?: boolean
+  // Info-icon tooltip text shown next to the label.
+  tooltip?: string
+  // Should match the control's id so the label points at it.
+  htmlFor?: string
+  className?: string
+}
+
+// The generic form-field wrapper: FieldLabel (+ tooltip/required) + a control +
+// FieldError. Library-agnostic and control-agnostic — InputField, SelectField
+// and TextAreaField are thin specialisations, and any custom control can be
+// dropped in directly (the typed replacement for InputGroup's `component=`).
+const Field: FC<FieldProps> = ({
+  children,
+  className,
+  error,
+  htmlFor,
+  label,
+  required,
+  tooltip,
+}) => (
+  <div className={cn('form-group', className)}>
+    {label && (
+      <FieldLabel htmlFor={htmlFor} required={required} tooltip={tooltip}>
+        {label}
+      </FieldLabel>
+    )}
+    {children}
+    <FieldError error={error} />
+  </div>
+)
+
+export default Field
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index aed2c155529f..a9f44c2629b6 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -1,9 +1,7 @@
 import React, { FC, ReactNode, Ref, useRef } from 'react'
-import cn from 'classnames'
 import Input, { InputMethods, InputProps } from './Input'
 import Utils from 'common/utils/utils'
-import FieldLabel from './FieldLabel'
-import FieldError from './FieldError'
+import Field from './Field'
 
 interface InputFieldProps extends Omit<InputProps, 'isValid'> {
   // Field label; wired to the input via htmlFor/id.
@@ -20,9 +18,9 @@ interface InputFieldProps extends Omit<InputProps, 'isValid'> {
   ref?: Ref<InputMethods>
 }
 
-// Composes FieldLabel + Input + FieldError into one labelled, validated field —
-// the typed successor to InputGroup. Presentational and library-agnostic: pass
-// `error` and it surfaces both the invalid styling and the message.
+// Field specialised to Input — the typed successor to InputGroup. Presentational
+// and library-agnostic: pass `error` and it surfaces both the invalid styling
+// and the message.
 const InputField: FC<InputFieldProps> = ({
   error,
   id,
@@ -36,12 +34,14 @@ const InputField: FC<InputFieldProps> = ({
   const generatedId = useRef(Utils.GUID()).current
   const fieldId = id ?? generatedId
   return (
-    <div className={cn('form-group', wrapperClassName)}>
-      {label && (
-        <FieldLabel htmlFor={fieldId} required={required} tooltip={tooltip}>
-          {label}
-        </FieldLabel>
-      )}
+    <Field
+      label={label}
+      error={error}
+      required={required}
+      tooltip={tooltip}
+      htmlFor={fieldId}
+      className={wrapperClassName}
+    >
       <Input
         {...inputProps}
         id={fieldId}
@@ -52,8 +52,7 @@ const InputField: FC<InputFieldProps> = ({
         isValid={!error}
         autoValidate={!!error}
       />
-      <FieldError error={error} />
-    </div>
+    </Field>
   )
 }
 

From de586d339d670d7380ecc286f1f5f78759fa4edb Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:03:22 -0300
Subject: [PATCH 08/13] feat(forms): add TextAreaField

Field specialised to a textarea (label + error + tooltip). With Storybook
stories.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/TextAreaField.stories.tsx      | 58 ++++++++++++++++++
 .../components/base/forms/TextAreaField.tsx   | 59 +++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 frontend/documentation/components/TextAreaField.stories.tsx
 create mode 100644 frontend/web/components/base/forms/TextAreaField.tsx

diff --git a/frontend/documentation/components/TextAreaField.stories.tsx b/frontend/documentation/components/TextAreaField.stories.tsx
new file mode 100644
index 000000000000..8d896029719f
--- /dev/null
+++ b/frontend/documentation/components/TextAreaField.stories.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import TextAreaField from 'components/base/forms/TextAreaField'
+
+const meta: Meta<typeof TextAreaField> = {
+  component: TextAreaField,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/TextAreaField',
+}
+export default meta
+
+type Story = StoryObj<typeof TextAreaField>
+
+const Interactive = () => {
+  const [value, setValue] = useState('')
+  return (
+    <TextAreaField
+      label='Description'
+      rows={3}
+      placeholder='Describe…'
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Interactive />,
+}
+
+export const Required: Story = {
+  render: () => (
+    <TextAreaField
+      label='Description'
+      required
+      rows={3}
+      placeholder='Describe…'
+    />
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <TextAreaField
+      label='Description'
+      rows={3}
+      value='Too short'
+      error='Please add more detail.'
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <TextAreaField label='Description' rows={3} disabled value='Read only' />
+  ),
+}
diff --git a/frontend/web/components/base/forms/TextAreaField.tsx b/frontend/web/components/base/forms/TextAreaField.tsx
new file mode 100644
index 000000000000..6d162e5b607a
--- /dev/null
+++ b/frontend/web/components/base/forms/TextAreaField.tsx
@@ -0,0 +1,59 @@
+import React, {
+  FC,
+  ReactNode,
+  Ref,
+  TextareaHTMLAttributes,
+  useRef,
+} from 'react'
+import cn from 'classnames'
+import Utils from 'common/utils/utils'
+import Field from './Field'
+
+interface TextAreaFieldProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: ReactNode
+  // Field-level error; shows the message beneath the textarea when set.
+  error?: ReactNode
+  required?: boolean
+  // Info-icon tooltip text shown next to the label.
+  tooltip?: string
+  // Styles the label/textarea/error wrapper; `textareaClassName` the textarea.
+  wrapperClassName?: string
+  textareaClassName?: string
+  ref?: Ref<HTMLTextAreaElement>
+}
+
+// Field specialised to a textarea — the labelled, validated multi-line input.
+const TextAreaField: FC<TextAreaFieldProps> = ({
+  error,
+  id,
+  label,
+  ref,
+  required,
+  textareaClassName,
+  tooltip,
+  wrapperClassName,
+  ...rest
+}) => {
+  const generatedId = useRef(Utils.GUID()).current
+  const fieldId = id ?? generatedId
+  return (
+    <Field
+      label={label}
+      error={error}
+      required={required}
+      tooltip={tooltip}
+      htmlFor={fieldId}
+      className={wrapperClassName}
+    >
+      <textarea
+        {...rest}
+        id={fieldId}
+        ref={ref}
+        className={cn(textareaClassName, { 'border-danger': !!error })}
+      />
+    </Field>
+  )
+}
+
+export default TextAreaField

From 4bf10cd2ee45c768e5f8b91918e7b5ee423cd8ee Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:24:29 -0300
Subject: [PATCH 09/13] refactor(forms): migrate search inputs to SearchInput

Replace <Input search /> with <SearchInput /> across 16 files (18 sites).
Behaviour-identical; SearchInput fixes type='text' + the search icon.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/BreadcrumbSeparator.tsx        |  8 +++-----
 frontend/web/components/GroupSelect.tsx                |  5 ++---
 frontend/web/components/IntegrationSelect.tsx          |  5 ++---
 frontend/web/components/PanelSearch.tsx                |  6 ++----
 frontend/web/components/PermissionsTabs.tsx            | 10 +++-------
 frontend/web/components/RolesSelect.tsx                |  5 ++---
 frontend/web/components/UserSelect.tsx                 |  5 ++---
 .../ExperimentsListControls.tsx                        |  4 ++--
 .../components/experiments/steps/MeasurementStep.tsx   |  5 ++---
 .../inspect-permissions/InspectPermissions.tsx         |  6 ++----
 .../inspect-permissions/ProjectPermissions.tsx         |  6 ++----
 frontend/web/components/pages/MetricsPage.tsx          |  4 ++--
 frontend/web/components/tables/TableFilterOptions.tsx  |  6 ++----
 frontend/web/components/tables/TableSearchFilter.tsx   |  6 ++----
 frontend/web/components/tables/TableTagFilter.tsx      |  6 ++----
 frontend/web/components/tags/AddEditTags.tsx           |  5 ++---
 16 files changed, 34 insertions(+), 58 deletions(-)

diff --git a/frontend/web/components/BreadcrumbSeparator.tsx b/frontend/web/components/BreadcrumbSeparator.tsx
index bbd83e2b0127..628f7a7211e5 100644
--- a/frontend/web/components/BreadcrumbSeparator.tsx
+++ b/frontend/web/components/BreadcrumbSeparator.tsx
@@ -2,7 +2,7 @@ import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
 import { IonIcon } from '@ionic/react'
 import { checkmarkCircle, chevronDown, chevronUp } from 'ionicons/icons'
 import InlineModal from './InlineModal'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import {
   Environment,
   Organisation,
@@ -332,13 +332,12 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
               onMouseEnter={() => setHoveredSection('organisation')}
               style={{ maxWidth: 'calc(50vw - 10px)', width: 260 }}
             >
-              <Input
+              <SearchInput
                 autoFocus={focus === 'organisation'}
                 onKeyDown={(e) => navigateOrganisations(e, organisations)}
                 onChange={(e) => {
                   setOrganisationSearch(Utils.safeParseEventValue(e))
                 }}
-                search
                 inputClassName='border-0 bg-transparent border-bottom-1'
                 size='xSmall'
                 className='full-width'
@@ -387,13 +386,12 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
                 'border-left-1',
               )}
             >
-              <Input
+              <SearchInput
                 onChange={(e) => {
                   setProjectSearch(Utils.safeParseEventValue(e))
                 }}
                 autoFocus={focus === 'project'}
                 onKeyDown={(e) => navigateProjects(e)}
-                search
                 className='full-width'
                 inputClassName='border-0 bg-transparent border-bottom-1'
                 size='xSmall'
diff --git a/frontend/web/components/GroupSelect.tsx b/frontend/web/components/GroupSelect.tsx
index 87f18bba4607..e746a74c5300 100644
--- a/frontend/web/components/GroupSelect.tsx
+++ b/frontend/web/components/GroupSelect.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import InlineModal from './InlineModal'
 import { UserGroup, UserGroupSummary } from 'common/types/responses'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import Icon from './icons/Icon'
 
@@ -41,13 +41,12 @@ const GroupSelect: FC<GroupSelectType> = ({
       onClose={onToggle}
       className={modalClassName}
     >
-      <Input
+      <SearchInput
         disabled={disabled}
         value={filter}
         onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Group'
-        search
       />
       <div style={{ maxHeight: 200, overflowY: 'auto' }}>
         {grouplist &&
diff --git a/frontend/web/components/IntegrationSelect.tsx b/frontend/web/components/IntegrationSelect.tsx
index 2890c4939ea0..8be802f6875e 100644
--- a/frontend/web/components/IntegrationSelect.tsx
+++ b/frontend/web/components/IntegrationSelect.tsx
@@ -5,6 +5,7 @@ import {
   IntegrationSummary,
 } from './pages/IntegrationsPage'
 import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import { sortBy, uniqBy } from 'lodash'
 import ConfigProvider from 'common/providers/ConfigProvider'
@@ -103,15 +104,13 @@ const IntegrationSelect: FC<IntegrationSelectType> = ({ onComplete }) => {
             </PageTitle>
             <div className='row'>
               <div className='col-md-6 px-3'>
-                <Input
+                <SearchInput
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     setSearch(Utils.safeParseEventValue(e))
                   }}
                   value={search}
-                  type='text'
                   className='w-100'
                   placeholder='Search'
-                  search
                 />
               </div>
               <div className='col-md-6'>
diff --git a/frontend/web/components/PanelSearch.tsx b/frontend/web/components/PanelSearch.tsx
index bb3d4d90c308..9acd2a3511dd 100644
--- a/frontend/web/components/PanelSearch.tsx
+++ b/frontend/web/components/PanelSearch.tsx
@@ -10,7 +10,7 @@ import React, {
 } from 'react'
 import { AutoSizer, List } from 'react-virtualized'
 import Popover from './base/Popover'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Icon from './icons/Icon'
 import { IonIcon } from '@ionic/react'
 import { chevronDown, chevronUp } from 'ionicons/icons'
@@ -328,7 +328,7 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
                 <Row
                   onClick={() => inputRef.current && inputRef.current.focus()}
                 >
-                  <Input
+                  <SearchInput
                     ref={inputRef}
                     onBlur={props.onBlur}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -339,11 +339,9 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
                         setInternalSearch(Utils.safeParseEventValue(e))
                       }
                     }}
-                    type='text'
                     value={search}
                     size='small'
                     placeholder='Search'
-                    search
                   />
                   {props.filterRowContent}
                 </Row>
diff --git a/frontend/web/components/PermissionsTabs.tsx b/frontend/web/components/PermissionsTabs.tsx
index 4748cace9933..4caafbe37c65 100644
--- a/frontend/web/components/PermissionsTabs.tsx
+++ b/frontend/web/components/PermissionsTabs.tsx
@@ -9,7 +9,7 @@ import {
 } from 'common/types/responses'
 import Tabs from './navigation/TabMenu/Tabs'
 import TabItem from './navigation/TabMenu/TabItem'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import RolePermissionsList from './RolePermissionsList'
 import ProjectFilter from './ProjectFilter'
@@ -106,14 +106,12 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
         >
           <Row className='justify-content-between'>
             <h5 className='my-3'>Permissions</h5>
-            <Input
-              type='text'
+            <SearchInput
               className='ml-3'
               value={searchProject}
               onChange={(e) => setSearchProject(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Projects'
-              search
             />
           </Row>
           <RolePermissionsList
@@ -136,14 +134,12 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
         >
           <Row className='justify-content-between'>
             <h5 className='my-3'>Permissions</h5>
-            <Input
-              type='text'
+            <SearchInput
               className='ml-3'
               value={searchEnv}
               onChange={(e) => setSearchEnv(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Environments'
-              search
             />
           </Row>
           <div className='mb-2' style={{ width: 250 }}>
diff --git a/frontend/web/components/RolesSelect.tsx b/frontend/web/components/RolesSelect.tsx
index f98b2327bae4..03c9b6b3caf7 100644
--- a/frontend/web/components/RolesSelect.tsx
+++ b/frontend/web/components/RolesSelect.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import InlineModal from './InlineModal'
 import { Role } from 'common/types/responses'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import Icon from './icons/Icon'
 
@@ -41,13 +41,12 @@ const RoleSelect: FC<RoleSelectType> = ({
       onClose={onToggle}
       className='inline-modal--sm'
     >
-      <Input
+      <SearchInput
         disabled={disabled}
         value={filter}
         onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Role'
-        search
       />
       <div style={{ maxHeight: 200, overflowY: 'auto' }}>
         {rolelist &&
diff --git a/frontend/web/components/UserSelect.tsx b/frontend/web/components/UserSelect.tsx
index f9e53721f992..1ebe35e9b7d8 100644
--- a/frontend/web/components/UserSelect.tsx
+++ b/frontend/web/components/UserSelect.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import InlineModal from './InlineModal'
 import Icon from './icons/Icon'
 import classNames from 'classnames'
-import Input from './base/forms/Input'
+import SearchInput from './base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 interface UserSelectProps {
   users: any[]
@@ -53,7 +53,7 @@ const UserSelect: React.FC<UserSelectProps> = ({
       onClose={onToggle}
       className={modalClassName}
     >
-      <Input
+      <SearchInput
         disabled={disabled}
         value={filter}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -61,7 +61,6 @@ const UserSelect: React.FC<UserSelectProps> = ({
         }
         className='full-width mb-2'
         placeholder='Search User'
-        search
       />
       <div style={{ maxHeight: 200, overflowX: 'hidden', overflowY: 'auto' }}>
         {matchingUsers &&
diff --git a/frontend/web/components/experiments/ExperimentsListControls/ExperimentsListControls.tsx b/frontend/web/components/experiments/ExperimentsListControls/ExperimentsListControls.tsx
index cf03d417a74a..35c4ed305132 100644
--- a/frontend/web/components/experiments/ExperimentsListControls/ExperimentsListControls.tsx
+++ b/frontend/web/components/experiments/ExperimentsListControls/ExperimentsListControls.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, FC } from 'react'
 import Utils from 'common/utils/utils'
+import SearchInput from 'components/base/forms/SearchInput'
 import { FilterTab } from 'components/experiments/constants'
 import './ExperimentsListControls.scss'
 
@@ -35,13 +36,12 @@ const ExperimentsListControls: FC<ExperimentsListControlsProps> = ({
         ))}
       </div>
       <div className='experiments-controls__search'>
-        <Input
+        <SearchInput
           value={searchInput}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             onSearchChange(Utils.safeParseEventValue(e))
           }
           placeholder='Search experiments...'
-          search
           size='small'
         />
       </div>
diff --git a/frontend/web/components/experiments/steps/MeasurementStep.tsx b/frontend/web/components/experiments/steps/MeasurementStep.tsx
index 9f11203023ea..c891a0f995bc 100644
--- a/frontend/web/components/experiments/steps/MeasurementStep.tsx
+++ b/frontend/web/components/experiments/steps/MeasurementStep.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import Button from 'components/base/forms/Button'
+import SearchInput from 'components/base/forms/SearchInput'
 import Icon from 'components/icons/Icon'
 import ContentCard from 'components/base/grid/ContentCard'
 
@@ -9,11 +10,9 @@ const MeasurementStep: FC = () => {
       <ContentCard title='Metrics'>
         <div className='d-flex align-items-center gap-3'>
           <div className='flex-fill'>
-            <Input
-              type='text'
+            <SearchInput
               placeholder='Search metrics...'
               disabled
-              search
               size='small'
             />
           </div>
diff --git a/frontend/web/components/inspect-permissions/InspectPermissions.tsx b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
index 09052fb06e6a..b867aa5280d2 100644
--- a/frontend/web/components/inspect-permissions/InspectPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
@@ -2,7 +2,7 @@ import React, { FC, Ref, useMemo, useState } from 'react'
 import { Project, Role, User, UserGroupSummary } from 'common/types/responses'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import ProjectFilter from 'components/ProjectFilter'
 import OrganisationStore from 'common/stores/organisation-store'
@@ -77,14 +77,12 @@ const InspectPermissions: FC<InspectPermissionsType> = ({
         >
           <Row className='justify-content-between'>
             <h5 className='my-3'>Permissions</h5>
-            <Input
-              type='text'
+            <SearchInput
               className='ml-3'
               value={searchEnv}
               onChange={(e) => setSearchEnv(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Environments'
-              search
             />
           </Row>
           <div className='mb-2' style={{ width: 250 }}>
diff --git a/frontend/web/components/inspect-permissions/ProjectPermissions.tsx b/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
index 89ab477fabe4..19220a367199 100644
--- a/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/ProjectPermissions.tsx
@@ -5,7 +5,7 @@ import { Project } from 'common/types/responses'
 import Utils from 'common/utils/utils'
 
 import OrganisationStore from 'common/stores/organisation-store'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import ExpandablePermissionsList from './ExpandablePermissionsList'
 
 const ProjectPermissions = ({ userId }: { userId?: number }) => {
@@ -22,8 +22,7 @@ const ProjectPermissions = ({ userId }: { userId?: number }) => {
     <>
       <Row className='justify-content-between'>
         <h5 className='my-3'>Permissions</h5>
-        <Input
-          type='text'
+        <SearchInput
           className='ml-3='
           value={searchProject}
           onChange={(e) => {
@@ -31,7 +30,6 @@ const ProjectPermissions = ({ userId }: { userId?: number }) => {
           }}
           size='small'
           placeholder='Search Projects'
-          search
         />
       </Row>
       <PanelSearch
diff --git a/frontend/web/components/pages/MetricsPage.tsx b/frontend/web/components/pages/MetricsPage.tsx
index ff1a85c88064..78cbfb302776 100644
--- a/frontend/web/components/pages/MetricsPage.tsx
+++ b/frontend/web/components/pages/MetricsPage.tsx
@@ -13,6 +13,7 @@ import { useGetWarehouseConnectionsQuery } from 'common/services/useWarehouseCon
 import { Metric, WarehouseType } from 'common/types/responses'
 import useDebouncedSearch from 'common/useDebouncedSearch'
 import Button from 'components/base/forms/Button'
+import SearchInput from 'components/base/forms/SearchInput'
 import Icon from 'components/icons/Icon'
 import PageTitle from 'components/PageTitle'
 import Paging from 'components/Paging'
@@ -252,13 +253,12 @@ const MetricsPage: FC = () => {
 
         <div className='metrics-page__controls d-flex align-items-center mb-3'>
           <div className='metrics-page__search'>
-            <Input
+            <SearchInput
               value={searchInput}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setSearchInput(Utils.safeParseEventValue(e))
               }
               placeholder='Search metrics...'
-              search
             />
           </div>
           <Button onClick={() => history.push(`${metricsPath}?create=true`)}>
diff --git a/frontend/web/components/tables/TableFilterOptions.tsx b/frontend/web/components/tables/TableFilterOptions.tsx
index 86aa64310584..fa439c2b8a13 100644
--- a/frontend/web/components/tables/TableFilterOptions.tsx
+++ b/frontend/web/components/tables/TableFilterOptions.tsx
@@ -4,7 +4,7 @@ import { IonIcon } from '@ionic/react'
 import { caretDown } from 'ionicons/icons'
 import classNames from 'classnames'
 import TableFilterItem from './TableFilterItem'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 
 type TableFilterType = {
@@ -80,17 +80,15 @@ const TableFilter: FC<TableFilterType> = ({
         >
           {!!showSearch && (
             <div className='px-2 mt-2 mb-2'>
-              <Input
+              <SearchInput
                 autoFocus
                 onChange={(e) => {
                   setFilter(Utils.safeParseEventValue(e))
                 }}
                 className='full-width'
                 value={filter}
-                type='text'
                 size='xSmall'
                 placeholder='Search'
-                search
               />
               {!filteredOptions?.length && (
                 <div className='text-center py-2'>No results</div>
diff --git a/frontend/web/components/tables/TableSearchFilter.tsx b/frontend/web/components/tables/TableSearchFilter.tsx
index 31981fba4ba5..3e3c1e3c46f7 100644
--- a/frontend/web/components/tables/TableSearchFilter.tsx
+++ b/frontend/web/components/tables/TableSearchFilter.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import useDebounce from 'common/useDebounce'
 
@@ -16,18 +16,16 @@ const TableSearchFilter: FC<TableFilterType> = ({ onChange, value }) => {
   const debouncedOnChange = useDebounce((v: string) => onChange(v), 100)
 
   return (
-    <Input
+    <SearchInput
       onChange={(e) => {
         const v = Utils.safeParseEventValue(e)
         setLocalValue(v)
         debouncedOnChange(v)
       }}
       value={localValue}
-      type='text'
       className='me-3'
       size='xSmall'
       placeholder='Search'
-      search
     />
   )
 }
diff --git a/frontend/web/components/tables/TableTagFilter.tsx b/frontend/web/components/tables/TableTagFilter.tsx
index 8458ec01083f..fd6a49777792 100644
--- a/frontend/web/components/tables/TableTagFilter.tsx
+++ b/frontend/web/components/tables/TableTagFilter.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo, useState } from 'react'
 import TableFilter from './TableFilter'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import Utils from 'common/utils/utils'
 import { useGetTagsQuery } from 'common/services/useTag'
 import Tag from 'components/tags/Tag'
@@ -102,17 +102,15 @@ const TableTagFilter: FC<TableFilterType> = ({
       >
         <div className='inline-modal__list d-flex flex-column mx-0 py-0'>
           <div className='px-2 my-2'>
-            <Input
+            <SearchInput
               autoFocus
               onChange={(e) => {
                 setFilter(Utils.safeParseEventValue(e))
               }}
               className='full-width'
               value={filter}
-              type='text'
               size='xSmall'
               placeholder='Search'
-              search
             />
           </div>
           {filteredTags?.length === 0 && (
diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
index 48a32447b7c5..01dd6d5e9b9f 100644
--- a/frontend/web/components/tags/AddEditTags.tsx
+++ b/frontend/web/components/tags/AddEditTags.tsx
@@ -13,7 +13,7 @@ import {
 import { Tag as TTag } from 'common/types/responses'
 import Tag from './Tag'
 import CreateEditTag from './CreateEditTag'
-import Input from 'components/base/forms/Input'
+import SearchInput from 'components/base/forms/SearchInput'
 import Button from 'components/base/forms/Button'
 import Icon from 'components/icons/Icon'
 import TagUsage from 'components/TagUsage'
@@ -161,7 +161,7 @@ const AddEditTags: FC<AddEditTagsType> = ({
         <InlineModal
           hideClose
           title={
-            <Input
+            <SearchInput
               autoFocus
               value={filter}
               onKeyPress={(e) => {
@@ -173,7 +173,6 @@ const AddEditTags: FC<AddEditTagsType> = ({
               size='xSmall'
               className='full-width'
               placeholder='Search tags...'
-              search
             />
           }
           isOpen={isOpen}

From a9bcdd8c55686f98623b5b81346dc816f1d8c3bb Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:28:24 -0300
Subject: [PATCH 10/13] refactor(forms): migrate password inputs to
 PasswordInput

Replace <Input type='password' /> with <PasswordInput /> in Token,
CreateWebhook and CreateAuditLogWebhook. Behaviour-identical.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/Token.js                         | 4 ++--
 frontend/web/components/modals/CreateAuditLogWebhook.tsx | 4 ++--
 frontend/web/components/modals/CreateWebhook.tsx         | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/web/components/Token.js b/frontend/web/components/Token.js
index f2b48994e52f..3da4a97b81f6 100644
--- a/frontend/web/components/Token.js
+++ b/frontend/web/components/Token.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PasswordInput from './base/forms/PasswordInput'
 
 class Token extends Component {
   constructor(props) {
@@ -12,7 +13,7 @@ class Token extends Component {
     if (!this.props.token) return null
     return (
       <Row className='flex-nowrap'>
-        <Input
+        <PasswordInput
           inputProps={{
             readOnly: true,
           }}
@@ -21,7 +22,6 @@ class Token extends Component {
           className={`${
             this.state.showToken ? 'font-weight-bold' : ''
           } full-width`}
-          type='password'
         />
         {this.props.show && (
           <Button
diff --git a/frontend/web/components/modals/CreateAuditLogWebhook.tsx b/frontend/web/components/modals/CreateAuditLogWebhook.tsx
index 74a3a38b2bd4..a5d334689b3a 100644
--- a/frontend/web/components/modals/CreateAuditLogWebhook.tsx
+++ b/frontend/web/components/modals/CreateAuditLogWebhook.tsx
@@ -9,6 +9,7 @@ import Button from 'components/base/forms/Button'
 import AccountStore from 'common/stores/account-store'
 import Utils from 'common/utils/utils'
 import Input from 'components/base/forms/Input'
+import PasswordInput from 'components/base/forms/PasswordInput'
 import Switch from 'components/Switch'
 import { Webhook } from 'common/types/responses'
 import {
@@ -113,14 +114,13 @@ const CreateAuditLogWebhook: React.FC<Props> = ({
               </a>{' '}
             </label>
           </div>
-          <Input
+          <PasswordInput
             ref={inputRef}
             value={secret}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setSecret(Utils.safeParseEventValue(e))
             }
             isValid={!!url && url.length > 0}
-            type='password'
             className='full-width'
             placeholder='Secret'
           />
diff --git a/frontend/web/components/modals/CreateWebhook.tsx b/frontend/web/components/modals/CreateWebhook.tsx
index 18ff3364a433..619bc1f9629e 100644
--- a/frontend/web/components/modals/CreateWebhook.tsx
+++ b/frontend/web/components/modals/CreateWebhook.tsx
@@ -4,6 +4,7 @@ import { Webhook } from 'common/types/responses'
 import Utils from 'common/utils/utils'
 import ErrorMessage from 'components/ErrorMessage'
 import Highlight from 'components/Highlight'
+import PasswordInput from 'components/base/forms/PasswordInput'
 import TestWebhook from 'components/TestWebhook'
 import ViewDocs from 'components/ViewDocs'
 import { FC, useState, useRef, ChangeEvent } from 'react'
@@ -111,13 +112,12 @@ const CreateWebhook: FC<CreateWebhookProps> = ({
               </a>{' '}
             </label>
           </div>
-          <Input
+          <PasswordInput
             ref={secretInputRef}
             value={secret}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setSecret(Utils.safeParseEventValue(e))
             }
-            type='password'
             className='full-width'
             placeholder='Secret'
           />

From 32774764c49f4dc4d191d9d2efe7d4a25ebcd8d8 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:36:31 -0300
Subject: [PATCH 11/13] fix(forms): error below input, align label tooltip,
 a11y wiring

- FieldError renders block below the control (was inline, beside it)
- FieldLabel flex-centres the tooltip icon with the label text
- Wire aria-describedby + aria-invalid so screen readers announce the
  error and its association with the control (FieldError gets a stable id)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/base/forms/Field.tsx  | 26 +++++++++++--------
 .../web/components/base/forms/FieldError.tsx  | 10 +++++--
 .../web/components/base/forms/FieldLabel.tsx  |  5 +++-
 .../web/components/base/forms/InputField.tsx  |  4 +++
 .../components/base/forms/TextAreaField.tsx   |  3 +++
 5 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/web/components/base/forms/Field.tsx b/frontend/web/components/base/forms/Field.tsx
index 0ede74a3c5fb..655fac7caa79 100644
--- a/frontend/web/components/base/forms/Field.tsx
+++ b/frontend/web/components/base/forms/Field.tsx
@@ -29,16 +29,20 @@ const Field: FC<FieldProps> = ({
   label,
   required,
   tooltip,
-}) => (
-  <div className={cn('form-group', className)}>
-    {label && (
-      <FieldLabel htmlFor={htmlFor} required={required} tooltip={tooltip}>
-        {label}
-      </FieldLabel>
-    )}
-    {children}
-    <FieldError error={error} />
-  </div>
-)
+}) => {
+  // Stable id so the control can reference the message via aria-describedby.
+  const errorId = error && htmlFor ? `${htmlFor}-error` : undefined
+  return (
+    <div className={cn('form-group', className)}>
+      {label && (
+        <FieldLabel htmlFor={htmlFor} required={required} tooltip={tooltip}>
+          {label}
+        </FieldLabel>
+      )}
+      {children}
+      <FieldError id={errorId} error={error} />
+    </div>
+  )
+}
 
 export default Field
diff --git a/frontend/web/components/base/forms/FieldError.tsx b/frontend/web/components/base/forms/FieldError.tsx
index 34f51358338d..6022bbfbe88a 100644
--- a/frontend/web/components/base/forms/FieldError.tsx
+++ b/frontend/web/components/base/forms/FieldError.tsx
@@ -4,18 +4,24 @@ 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. This is 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 }) => {
+const FieldError: FC<FieldErrorProps> = ({ className, error, id }) => {
   if (!error) {
     return null
   }
   return (
-    <span className={cn('text-danger text-small', className)} role='alert'>
+    <span
+      id={id}
+      className={cn('text-danger text-small d-block mt-1', className)}
+      role='alert'
+    >
       {error}
     </span>
   )
diff --git a/frontend/web/components/base/forms/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index cb0118dc23c9..c6ce17728da6 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -23,7 +23,10 @@ const FieldLabel: FC<FieldLabelProps> = ({
   required,
   tooltip,
 }) => (
-  <label htmlFor={htmlFor} className={cn('control-label', className)}>
+  <label
+    htmlFor={htmlFor}
+    className={cn('control-label d-flex align-items-center', className)}
+  >
     {children}
     {required && (
       <span className='text-danger ml-1' aria-hidden>
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index a9f44c2629b6..fea4279d0335 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -33,6 +33,7 @@ const InputField: FC<InputFieldProps> = ({
 }) => {
   const generatedId = useRef(Utils.GUID()).current
   const fieldId = id ?? generatedId
+  const errorId = error ? `${fieldId}-error` : undefined
   return (
     <Field
       label={label}
@@ -51,6 +52,9 @@ const InputField: FC<InputFieldProps> = ({
         // to a controlled `invalid` prop once Input is slimmed.
         isValid={!error}
         autoValidate={!!error}
+        // Associate the error with the input for screen readers.
+        aria-invalid={error ? true : undefined}
+        aria-describedby={errorId}
       />
     </Field>
   )
diff --git a/frontend/web/components/base/forms/TextAreaField.tsx b/frontend/web/components/base/forms/TextAreaField.tsx
index 6d162e5b607a..844666feb36f 100644
--- a/frontend/web/components/base/forms/TextAreaField.tsx
+++ b/frontend/web/components/base/forms/TextAreaField.tsx
@@ -37,6 +37,7 @@ const TextAreaField: FC<TextAreaFieldProps> = ({
 }) => {
   const generatedId = useRef(Utils.GUID()).current
   const fieldId = id ?? generatedId
+  const errorId = error ? `${fieldId}-error` : undefined
   return (
     <Field
       label={label}
@@ -51,6 +52,8 @@ const TextAreaField: FC<TextAreaFieldProps> = ({
         id={fieldId}
         ref={ref}
         className={cn(textareaClassName, { 'border-danger': !!error })}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={errorId}
       />
     </Field>
   )

From 106b51b6421a28b12dcdd65d5ef4dd2f86608443 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:41:57 -0300
Subject: [PATCH 12/13] refactor(forms): trim InputField's prop surface

Omit Input props that don't belong on a labelled, validated field:
autoValidate/isValid (controlled via error), search (use SearchInput),
underline (inline-edit variant), centered, showSuccess, enableAutoComplete.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/web/components/base/forms/InputField.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index fea4279d0335..1b7e36017c69 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -3,7 +3,19 @@ import Input, { InputMethods, InputProps } from './Input'
 import Utils from 'common/utils/utils'
 import Field from './Field'
 
-interface InputFieldProps extends Omit<InputProps, 'isValid'> {
+interface InputFieldProps
+  extends Omit<
+    InputProps,
+    // Validation is controlled via `error` (InputField sets isValid/autoValidate
+    // itself); the variant/adornment props belong to other components.
+    | 'autoValidate'
+    | 'centered'
+    | 'enableAutoComplete'
+    | 'isValid'
+    | 'search'
+    | 'showSuccess'
+    | 'underline'
+  > {
   // Field label; wired to the input via htmlFor/id.
   label?: ReactNode
   // Field-level error. When set, the input shows its invalid state and the

From 6873bc391fac386ba447216d478095e48d2587af Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 11 Jun 2026 18:47:42 -0300
Subject: [PATCH 13/13] refactor(forms): reuse LabelWithTooltip; className for
 the field wrapper

- FieldLabel now composes the shared LabelWithTooltip (DS Tooltip) instead
  of hand-rolling Tooltip+Icon; widen LabelWithTooltip's label to ReactNode.
- InputField: drop wrapperClassName; the standard className now styles the
  field wrapper (no longer leaked to Input's inner container), inputClassName
  styles the input.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../web/components/base/LabelWithTooltip.tsx  |  4 +--
 .../web/components/base/forms/FieldLabel.tsx  | 36 +++++++++----------
 .../web/components/base/forms/InputField.tsx  |  9 ++---
 3 files changed, 23 insertions(+), 26 deletions(-)

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/FieldLabel.tsx b/frontend/web/components/base/forms/FieldLabel.tsx
index c6ce17728da6..caff45cba86e 100644
--- a/frontend/web/components/base/forms/FieldLabel.tsx
+++ b/frontend/web/components/base/forms/FieldLabel.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 import cn from 'classnames'
-import Icon from 'components/icons/Icon'
+import LabelWithTooltip from 'components/base/LabelWithTooltip'
 
 interface FieldLabelProps {
   // Associates the label with its control; required for accessibility.
@@ -14,8 +14,8 @@ interface FieldLabelProps {
 }
 
 // The label for a form field — wires `htmlFor` to the control, with an optional
-// required indicator and an info-icon tooltip. Pair with FieldError + a control
-// inside InputField, or use standalone.
+// 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,
@@ -27,23 +27,19 @@ const FieldLabel: FC<FieldLabelProps> = ({
     htmlFor={htmlFor}
     className={cn('control-label d-flex align-items-center', className)}
   >
-    {children}
-    {required && (
-      <span className='text-danger ml-1' aria-hidden>
-        *
-      </span>
-    )}
-    {tooltip && (
-      <span className='ml-1'>
-        <Tooltip
-          title={<Icon name='info-outlined' width={16} height={16} />}
-          place='top'
-          titleClassName='cursor-pointer'
-        >
-          {tooltip}
-        </Tooltip>
-      </span>
-    )}
+    <LabelWithTooltip
+      label={
+        <>
+          {children}
+          {required && (
+            <span className='text-danger ml-1' aria-hidden>
+              *
+            </span>
+          )}
+        </>
+      }
+      tooltip={tooltip}
+    />
   </label>
 )
 
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
index 1b7e36017c69..799588b5838b 100644
--- a/frontend/web/components/base/forms/InputField.tsx
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -25,8 +25,9 @@ interface InputFieldProps
   required?: boolean
   // Info-icon tooltip text shown next to the label.
   tooltip?: string
-  // Styles the label/input/error wrapper; `inputClassName` styles the input.
-  wrapperClassName?: string
+  // Styles the field wrapper (the label/input/error group); `inputClassName`
+  // styles the input element.
+  className?: string
   ref?: Ref<InputMethods>
 }
 
@@ -34,13 +35,13 @@ interface InputFieldProps
 // and library-agnostic: pass `error` and it surfaces both the invalid styling
 // and the message.
 const InputField: FC<InputFieldProps> = ({
+  className,
   error,
   id,
   label,
   ref,
   required,
   tooltip,
-  wrapperClassName,
   ...inputProps
 }) => {
   const generatedId = useRef(Utils.GUID()).current
@@ -53,7 +54,7 @@ const InputField: FC<InputFieldProps> = ({
       required={required}
       tooltip={tooltip}
       htmlFor={fieldId}
-      className={wrapperClassName}
+      className={className}
     >
       <Input
         {...inputProps}