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/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/documentation/components/InputField.stories.tsx b/frontend/documentation/components/InputField.stories.tsx
new file mode 100644
index 000000000000..63d49be3a7d3
--- /dev/null
+++ b/frontend/documentation/components/InputField.stories.tsx
@@ -0,0 +1,79 @@
+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>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <InputField label='Environment key' readOnly value='ser.abc123' />
+  ),
+}
+
+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/documentation/components/PasswordInput.stories.tsx b/frontend/documentation/components/PasswordInput.stories.tsx
new file mode 100644
index 000000000000..2eb65cc3e9c0
--- /dev/null
+++ b/frontend/documentation/components/PasswordInput.stories.tsx
@@ -0,0 +1,42 @@
+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 />,
+}
+
+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
new file mode 100644
index 000000000000..5618be8ee7ac
--- /dev/null
+++ b/frontend/documentation/components/SearchInput.stories.tsx
@@ -0,0 +1,44 @@
+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>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <SearchInput value='read-only' disabled placeholder='Search…' />
+  ),
+}
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/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/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/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/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/Field.tsx b/frontend/web/components/base/forms/Field.tsx
new file mode 100644
index 000000000000..655fac7caa79
--- /dev/null
+++ b/frontend/web/components/base/forms/Field.tsx
@@ -0,0 +1,48 @@
+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,
+}) => {
+  // 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
new file mode 100644
index 000000000000..6022bbfbe88a
--- /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. 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, 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
diff --git a/frontend/web/components/base/forms/InputField.tsx b/frontend/web/components/base/forms/InputField.tsx
new file mode 100644
index 000000000000..799588b5838b
--- /dev/null
+++ b/frontend/web/components/base/forms/InputField.tsx
@@ -0,0 +1,76 @@
+import React, { FC, ReactNode, Ref, useRef } from 'react'
+import Input, { InputMethods, InputProps } from './Input'
+import Utils from 'common/utils/utils'
+import Field from './Field'
+
+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
+  // 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
+  // Info-icon tooltip text shown next to the label.
+  tooltip?: string
+  // Styles the field wrapper (the label/input/error group); `inputClassName`
+  // styles the input element.
+  className?: string
+  ref?: Ref<InputMethods>
+}
+
+// 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> = ({
+  className,
+  error,
+  id,
+  label,
+  ref,
+  required,
+  tooltip,
+  ...inputProps
+}) => {
+  const generatedId = useRef(Utils.GUID()).current
+  const fieldId = id ?? generatedId
+  const errorId = error ? `${fieldId}-error` : undefined
+  return (
+    <Field
+      label={label}
+      error={error}
+      required={required}
+      tooltip={tooltip}
+      htmlFor={fieldId}
+      className={className}
+    >
+      <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}
+        // Associate the error with the input for screen readers.
+        aria-invalid={error ? true : undefined}
+        aria-describedby={errorId}
+      />
+    </Field>
+  )
+}
+
+export default InputField
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
diff --git a/frontend/web/components/base/forms/TextAreaField.tsx b/frontend/web/components/base/forms/TextAreaField.tsx
new file mode 100644
index 000000000000..844666feb36f
--- /dev/null
+++ b/frontend/web/components/base/forms/TextAreaField.tsx
@@ -0,0 +1,62 @@
+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
+  const errorId = error ? `${fieldId}-error` : undefined
+  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 })}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={errorId}
+      />
+    </Field>
+  )
+}
+
+export default TextAreaField
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/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'
           />
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}