diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 223032bc9d..05a1cc40b9 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.62.0",
+  "version": "7.62.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.62.0",
+      "version": "7.62.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 79697f08c9..b686176154 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.62.0",
+  "version": "7.62.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/src/internal/app/products.ts b/packages/components/src/internal/app/products.ts
index d07b2fa944..7e7c00479b 100644
--- a/packages/components/src/internal/app/products.ts
+++ b/packages/components/src/internal/app/products.ts
@@ -11,13 +11,8 @@ import { ModuleContext, resolveModuleContext } from '../components/base/ServerCo
 // These ids should match what is used by the MenuProviders in the Java code, so we can avoid toLowerCase comparisons.
 export const LKS_PRODUCT_ID = 'LabKeyServer';
 export const BIOLOGICS_PRODUCT_ID = 'Biologics';
-export const BIOLOGICS_ENTERPRISE_PRODUCT_KEY = 'limsEnterprise';
-export const BIOLOGICS_STARTER_PRODUCT_KEY = 'limsStarter'
 export const LIMS_PRODUCT_ID = 'LIMS';
-export const LIMS_PRODUCT_KEY = 'labkeyLims';
 export const SAMPLE_MANAGER_PRODUCT_ID = 'SampleManager';
-export const SAMPLE_MANAGER_STARTER_PRODUCT_KEY = 'sampleManagerStarter';
-export const SAMPLE_MANAGER_PROFESSIONAL_PRODUCT_KEY = 'sampleManagerProfessional'
 export const FREEZER_MANAGER_PRODUCT_ID = 'FreezerManager';
 
 export function isFreezerManagementEnabled(moduleContext?: ModuleContext): boolean {
diff --git a/packages/components/src/internal/components/editable/LookupCell.tsx b/packages/components/src/internal/components/editable/LookupCell.tsx
index ff2ec4acbf..6523086d49 100644
--- a/packages/components/src/internal/components/editable/LookupCell.tsx
+++ b/packages/components/src/internal/components/editable/LookupCell.tsx
@@ -148,12 +148,10 @@ export const LookupCell: FC<LookupCellProps> = memo(props => {
                 autoFocus
                 defaultInputValue={defaultInputValue}
                 disabled={disabled}
-                multiple={col.isMultiChoice}
                 onBlur={onBlur}
                 onChange={onSelectChange}
                 onKeyDown={onKeyDown}
                 queryColumn={col}
-                skipJoinValues={true}
                 value={col.isMultiChoice ? rawValues : rawValues[0]}
             />
         );
diff --git a/packages/components/src/internal/components/forms/BulkUpdateForm.test.tsx b/packages/components/src/internal/components/forms/BulkUpdateForm.test.tsx
index f4072436fa..b14853d831 100644
--- a/packages/components/src/internal/components/forms/BulkUpdateForm.test.tsx
+++ b/packages/components/src/internal/components/forms/BulkUpdateForm.test.tsx
@@ -56,6 +56,8 @@ const QUERY_INFO = QueryInfo.fromJsonForTests({
 
 const DEFAULT_PROPS: BulkUpdateFormProps = {
     api: getTestAPIWrapper(jest.fn),
+    nounPlural: QUERY,
+    nounSingular: QUERY,
     onComplete: jest.fn(),
     onCancel: jest.fn(),
     queryInfo: QUERY_INFO,
@@ -105,8 +107,8 @@ describe('BulkUpdateForm', () => {
                 expect(document.querySelectorAll('.query-info-form')).toHaveLength(1);
             });
             expect(document.querySelectorAll('.toggle-group-icon')).toHaveLength(2);
-            expect(document.querySelectorAll('input#update')).toHaveLength(1);
-            expect(document.querySelector('input#update').getAttribute('value')).toBe('abc');
+            expect(document.querySelectorAll('input[name="update"]')).toHaveLength(1);
+            expect(document.querySelector('input[name="update"]')).toHaveValue('abc');
             expect(document.querySelectorAll('.attachment-card__name')).toHaveLength(1);
             expect(document.querySelector('.attachment-card__name')).toHaveTextContent('test.txt');
         });
@@ -118,7 +120,7 @@ describe('BulkUpdateForm', () => {
                 expect(document.querySelectorAll('.query-info-form')).toHaveLength(1);
             });
             expect(document.querySelectorAll('.toggle-group-icon')).toHaveLength(1);
-            expect(document.querySelectorAll('input#update')).toHaveLength(0);
+            expect(document.querySelectorAll('input[name="update"]')).toHaveLength(0);
             expect(document.querySelectorAll('.attachment-card__name')).toHaveLength(1);
         });
     });
diff --git a/packages/components/src/internal/components/forms/input/AmountUnitInput.tsx b/packages/components/src/internal/components/forms/input/AmountUnitInput.tsx
index 7ea8e33ef8..fba7861795 100644
--- a/packages/components/src/internal/components/forms/input/AmountUnitInput.tsx
+++ b/packages/components/src/internal/components/forms/input/AmountUnitInput.tsx
@@ -94,14 +94,13 @@ export const AmountUnitInput: FC<InputRendererProps> = memo(props => {
                 />
                 <TextInput
                     aria-label="Amount"
-                    disableInput={disabled}
+                    disabled={disabled}
                     elementWrapperClassName=""
                     hasMixedValue={hasMixedAmountValue}
                     onChange={onAmountChange}
                     queryColumn={amountCol}
                     rowClassName="col-sm-5 col-xs-6"
                     showLabel={false}
-                    type="number"
                     validations="sampleAmount"
                     value={amountValue ? String(amountValue) : amountValue}
                 />
diff --git a/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx b/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
index 6e90ebe495..0c3746d5ab 100644
--- a/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
+++ b/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
@@ -22,7 +22,7 @@ describe('AppendUnitsInput', () => {
     test('without formsy', () => {
         // Without Formsy it should not crash the page
         renderWithAppContext(<AppendUnitsInput col={column} data={undefined} value={undefined} />);
-        expect(document.querySelector('#appendUnitsColumn')).toBeNull();
+        expect(document.querySelector('input[name="appendUnitsColumn"]')).not.toBeInTheDocument();
     });
 
     test('with formsy', () => {
@@ -31,6 +31,6 @@ describe('AppendUnitsInput', () => {
                 <AppendUnitsInput col={column} data={undefined} formsy value={undefined} />
             </Formsy>
         );
-        expect(document.querySelector('#appendUnitsColumn')).toBeInTheDocument();
+        expect(document.querySelector('input[name="appendUnitsColumn"]')).toBeInTheDocument();
     });
 });
diff --git a/packages/components/src/internal/components/forms/input/DisableableInput.test.tsx b/packages/components/src/internal/components/forms/input/DisableableInput.test.tsx
index aba0aa9cf9..3205eff1d6 100644
--- a/packages/components/src/internal/components/forms/input/DisableableInput.test.tsx
+++ b/packages/components/src/internal/components/forms/input/DisableableInput.test.tsx
@@ -31,6 +31,36 @@ describe('DisableableInput', () => {
             expect(notDisableable.result.current.inputValue).toBe('fromProps');
         });
 
+        test('localValue reports local edits whether or not allowDisable is set', () => {
+            const disableable = renderHook(() =>
+                useDisableableInput<string>({ allowDisable: true, value: 'fromProps' })
+            );
+            const notDisableable = renderHook(() => useDisableableInput<string>({ value: 'fromProps' }));
+
+            expect(disableable.result.current.localValue).toBe('fromProps');
+            expect(notDisableable.result.current.localValue).toBe('fromProps');
+
+            act(() => {
+                disableable.result.current.setInputValue('edited');
+            });
+            act(() => {
+                notDisableable.result.current.setInputValue('edited');
+            });
+
+            expect(disableable.result.current.localValue).toBe('edited');
+
+            // Where inputValue falls back to the value from props, localValue still reports the edit
+            expect(notDisableable.result.current.inputValue).toBe('fromProps');
+            expect(notDisableable.result.current.localValue).toBe('edited');
+
+            // Disabling discards the edit, so localValue tracks the value the input reverts to
+            act(() => {
+                disableable.result.current.toggleDisabled();
+            });
+
+            expect(disableable.result.current.localValue).toBe('fromProps');
+        });
+
         test('discards local edits when the input is disabled', () => {
             const { result } = renderHook(() =>
                 useDisableableInput<string>({ allowDisable: true, value: 'fromProps' })
diff --git a/packages/components/src/internal/components/forms/input/DisableableInput.tsx b/packages/components/src/internal/components/forms/input/DisableableInput.tsx
index 95c95907d6..533c13fa47 100644
--- a/packages/components/src/internal/components/forms/input/DisableableInput.tsx
+++ b/packages/components/src/internal/components/forms/input/DisableableInput.tsx
@@ -59,6 +59,11 @@ export interface UseDisableableInput<V> {
      */
     inputValue: V;
     isDisabled: boolean;
+    /**
+     * The locally tracked value. Unlike inputValue this never falls back to props, so it still reflects what the user
+     * has typed into an input whose parent does not echo edits back through value.
+     */
+    localValue: V;
     /**
      * Records the value as the user edits it so it can be reverted when the input is subsequently disabled.
      * Call this from the input's onChange handler.
@@ -117,6 +122,7 @@ export function useDisableableInput<V>(props: DisableableInputProps<V>): UseDisa
     return {
         inputValue: !allowDisable || inputValue === undefined ? value : inputValue,
         isDisabled,
+        localValue: inputValue,
         setInputValue,
         toggleDisabled,
     };
diff --git a/packages/components/src/internal/components/forms/input/TextAreaInput.test.tsx b/packages/components/src/internal/components/forms/input/TextAreaInput.test.tsx
new file mode 100644
index 0000000000..a1fddc1f8e
--- /dev/null
+++ b/packages/components/src/internal/components/forms/input/TextAreaInput.test.tsx
@@ -0,0 +1,197 @@
+/*
+ * Copyright (c) 2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
+ * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
+ */
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import { QueryColumn } from '../../../../public/QueryColumn';
+import { Formsy } from '../formsy';
+import { INPUT_LABEL_CLASS_NAME, INPUT_WRAPPER_CLASS_NAME, MIXED_VALUE_DISPLAY } from '../constants';
+
+import { TextAreaInput, TextAreaInputProps } from './TextAreaInput';
+
+const COLUMN = new QueryColumn({ caption: 'Description', fieldKey: 'description', name: 'description' });
+const REQUIRED_COLUMN = COLUMN.mutate({ required: true }) as QueryColumn;
+
+const ENABLED_FIELD_SELECTOR = `input[name="${COLUMN.fieldKey}::enabled"]`;
+
+function renderInForm(props?: Partial<TextAreaInputProps>): RenderResult {
+    return render(
+        <Formsy>
+            <TextAreaInput queryColumn={COLUMN} {...props} />
+        </Formsy>
+    );
+}
+
+function textArea(): HTMLTextAreaElement {
+    return document.querySelector('textarea');
+}
+
+function clickToggle(): Promise<void> {
+    return userEvent.click(document.querySelector('.control-label-toggle-input button:last-child'));
+}
+
+describe('TextAreaInput', () => {
+    describe('label', () => {
+        test('renders the column caption by default', () => {
+            const { container } = renderInForm();
+
+            const label = container.querySelector('label');
+            expect(label).toHaveTextContent('Description');
+            expect(label).toHaveClass(...INPUT_LABEL_CLASS_NAME.split(' '), 'textarea-control-label');
+            // With a visible label the textarea is labeled by the <label>, so aria-label would be redundant
+            expect(textArea()).not.toHaveAttribute('aria-label');
+        });
+
+        // Control drops the <label> entirely when it is given a null label for an optional column, so the textarea
+        // carries its accessible name itself, and the wrapper takes the offset the label would have occupied
+        test('drops the label but keeps the textarea accessible when showLabel is false', () => {
+            const { container } = renderInForm({ showLabel: false });
+
+            expect(container.querySelector('label')).not.toBeInTheDocument();
+            expect(textArea()).toHaveAttribute('aria-label', 'Description');
+            expect(container.querySelector('.offset-sm-3')).toBeInTheDocument();
+        });
+
+        // A required column still needs somewhere to hang its asterisk, which is the only case where the
+        // hide-label class is actually used
+        test('keeps a hidden label carrying the asterisk when showLabel is false for a required column', () => {
+            const { container } = renderInForm({ queryColumn: REQUIRED_COLUMN, showLabel: false });
+
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('hide-label');
+            expect(label).toHaveTextContent('*');
+            expect(textArea()).toHaveAttribute('aria-label', 'Description');
+        });
+
+        test('renders a caller-supplied label in place of the FieldLabel', () => {
+            const renderFieldLabel = jest.fn().mockReturnValue(<span className="custom-label">Custom</span>);
+            const { container } = renderInForm({ renderFieldLabel });
+
+            expect(renderFieldLabel).toHaveBeenCalledWith(COLUMN);
+            expect(container.querySelector('.custom-label')).toBeInTheDocument();
+            // FieldLabel's overlay is bypassed entirely
+            expect(container.querySelector('.overlay-trigger')).not.toBeInTheDocument();
+        });
+
+        test('renders the required asterisk for a required column', () => {
+            const { container } = renderInForm({ queryColumn: REQUIRED_COLUMN });
+
+            expect(container.querySelector('label')).toHaveTextContent('*');
+            expect(textArea()).toBeRequired();
+        });
+
+        // QueryFormInputs mutates the column to non-required when checkRequiredFields is false, so the asterisk
+        // has to come from the label overlay instead of the Formsy Control
+        test('renders the asterisk without requiring the textarea when addLabelAsterisk is set', () => {
+            const { container } = renderInForm({ addLabelAsterisk: true });
+
+            expect(container.querySelector('label')).toHaveTextContent('*');
+            expect(textArea()).not.toBeRequired();
+        });
+    });
+
+    describe('textarea attributes', () => {
+        test('leaves name unencoded', () => {
+            const column = COLUMN.mutate({ fieldKey: 'Lookup/Field', name: 'Lookup/Field' });
+            renderInForm({ queryColumn: column });
+            expect(textArea()).toHaveAttribute('name', 'Lookup/Field');
+        });
+
+        test('honors a caller-supplied id', () => {
+            renderInForm({ id: 'my-own-id' });
+
+            expect(textArea()).toHaveAttribute('id', 'my-own-id');
+        });
+
+        test('applies the default wrapper class name', () => {
+            const { container } = renderInForm();
+
+            expect(container.querySelector(`.${INPUT_WRAPPER_CLASS_NAME.split(' ').join('.')}`)).toBeInTheDocument();
+        });
+
+        test('sizes the textarea, letting the caller override', () => {
+            const { unmount } = renderInForm();
+            expect(textArea()).toHaveAttribute('cols', '50');
+            expect(textArea()).toHaveAttribute('rows', '5');
+            unmount();
+
+            // DetailDisplay renders a smaller textarea
+            renderInForm({ cols: 4, rows: 4 });
+            expect(textArea()).toHaveAttribute('cols', '4');
+            expect(textArea()).toHaveAttribute('rows', '4');
+        });
+
+        test('placeholder prompts for the caption', () => {
+            renderInForm();
+
+            expect(textArea()).toHaveAttribute('placeholder', 'Enter description');
+        });
+
+        test('placeholder reports a mixed value only while disabled', () => {
+            const { unmount } = renderInForm({ hasMixedValue: true });
+            expect(textArea()).toHaveAttribute('placeholder', 'Enter description');
+            unmount();
+
+            renderInForm({ disabled: true, hasMixedValue: true });
+            expect(textArea()).toHaveAttribute('placeholder', MIXED_VALUE_DISPLAY);
+        });
+    });
+
+    describe('onChange', () => {
+        test('reports the field key and the new value', async () => {
+            const onChange = jest.fn();
+            renderInForm({ onChange });
+
+            await userEvent.type(textArea(), 'ab');
+
+            expect(onChange).toHaveBeenCalledTimes(2);
+            expect(onChange).toHaveBeenLastCalledWith(COLUMN.fieldKey, 'ab');
+        });
+    });
+
+    describe('disabling', () => {
+        test('disables the textarea when disabled is set', () => {
+            renderInForm({ disabled: true });
+
+            expect(textArea()).toBeDisabled();
+        });
+
+        test('renders no toggle unless allowDisable is set', () => {
+            const { container } = renderInForm();
+
+            expect(container.querySelector('.control-label-toggle-input')).not.toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).not.toBeInTheDocument();
+        });
+
+        test('starts disabled when initiallyDisabled is set', () => {
+            const { container } = renderInForm({ allowDisable: true, initiallyDisabled: true });
+
+            expect(textArea()).toBeDisabled();
+            expect(container.querySelector('.fa-toggle-off')).toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'false');
+        });
+
+        test('discards local edits when the field is toggled off', async () => {
+            const onToggleDisable = jest.fn();
+            const { container } = renderInForm({ allowDisable: true, onToggleDisable, value: 'fromProps' });
+
+            expect(textArea()).toBeEnabled();
+            expect(container.querySelector('.fa-toggle-on')).toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'true');
+
+            await userEvent.clear(textArea());
+            await userEvent.type(textArea(), 'edited');
+            expect(textArea()).toHaveValue('edited');
+
+            await clickToggle();
+
+            expect(onToggleDisable).toHaveBeenLastCalledWith(true);
+            expect(textArea()).toBeDisabled();
+            expect(textArea()).toHaveValue('fromProps');
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'false');
+        });
+    });
+});
diff --git a/packages/components/src/internal/components/forms/input/TextAreaInput.tsx b/packages/components/src/internal/components/forms/input/TextAreaInput.tsx
index bfba1ac4c5..64fdfe885d 100644
--- a/packages/components/src/internal/components/forms/input/TextAreaInput.tsx
+++ b/packages/components/src/internal/components/forms/input/TextAreaInput.tsx
@@ -2,111 +2,98 @@
  * Copyright (c) 2019-2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
  * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
  */
-import React, { ReactNode } from 'react';
-
-import { FieldLabel } from '../FieldLabel';
+import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { QueryColumn } from '../../../../public/QueryColumn';
-
+import { FieldLabel } from '../FieldLabel';
 import { INPUT_LABEL_CLASS_NAME, INPUT_WRAPPER_CLASS_NAME, MIXED_VALUE_DISPLAY } from '../constants';
-
-import { DisableableInput, DisableableInputProps, DisableableInputState } from './DisableableInput';
 import { FormsyTextArea, FormsyTextAreaProps } from './FormsyReactComponents';
-import { stringToHtmlId } from '../../../util/utils';
+import { DisableableInputProps, useDisableableInput } from './DisableableInput';
+import { generateId } from '../../../util/utils';
 
-interface TextAreaInputProps extends DisableableInputProps, Omit<FormsyTextAreaProps, 'onChange'> {
+export interface TextAreaInputProps extends DisableableInputProps, Omit<FormsyTextAreaProps, 'name' | 'onChange'> {
     addLabelAsterisk?: boolean;
-    onChange?: (value: any) => void;
+    onChange?: (name: string, value: any) => void;
     queryColumn: QueryColumn;
     renderFieldLabel?: (queryColumn: QueryColumn, label?: string, description?: string) => ReactNode;
     showLabel?: boolean;
 }
 
-export class TextAreaInput extends DisableableInput<TextAreaInputProps, DisableableInputState> {
-    static defaultProps = {
-        ...DisableableInput.defaultProps,
-        ...{
-            cols: 50,
-            elementWrapperClassName: INPUT_WRAPPER_CLASS_NAME,
-            labelClassName: `${INPUT_LABEL_CLASS_NAME} textarea-control-label`,
-            rows: 5,
-            showLabel: true,
-        },
-    };
-
-    constructor(props: TextAreaInputProps) {
-        super(props);
-
-        this.toggleDisabled = this.toggleDisabled.bind(this);
-
-        this.state = {
-            isDisabled: props.initiallyDisabled,
-        };
-    }
-
-    renderLabel() {
-        const { label, queryColumn, showLabel, allowDisable, addLabelAsterisk, renderFieldLabel } = this.props;
-        const { isDisabled } = this.state;
-
+export const TextAreaInput: FC<TextAreaInputProps> = props => {
+    // Extract DisableableInputProps, TextAreaInputProps
+    const {
+        addLabelAsterisk,
+        allowDisable,
+        disabled,
+        elementWrapperClassName = INPUT_WRAPPER_CLASS_NAME,
+        hasMixedValue,
+        id,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        initiallyDisabled,
+        label,
+        labelClassName = `${INPUT_LABEL_CLASS_NAME} textarea-control-label`,
+        onChange,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onToggleDisable,
+        renderFieldLabel,
+        queryColumn,
+        showLabel = true,
+        ...formsyTextAreaProps
+    } = props;
+    const { inputValue, isDisabled, setInputValue, toggleDisabled } = useDisableableInput<string>(props);
+    const [inputId] = useState<string>(() => id ?? generateId('textAreaInput-'));
+    const isDisabled_ = isDisabled || disabled;
+
+    const label_ = useMemo(() => {
         if (renderFieldLabel) {
             return renderFieldLabel(queryColumn);
         }
 
-        // This is here (at least for now) because of the use of the hide-label class below
-        // in place of sending showLabel=false???
+        // Control emits a <label> unless this is null, so FieldLabel's showLabel guard is too late
         if (showLabel === false) {
             return null;
         }
+
         return (
             <FieldLabel
                 column={queryColumn}
                 isDisabled={isDisabled}
                 label={label}
-                labelOverlayProps={{ isFormsy: true, addLabelAsterisk }}
+                labelOverlayProps={{ addLabelAsterisk, isFormsy: true }}
                 showLabel={showLabel}
                 showToggle={allowDisable}
-                toggleProps={{
-                    onClick: this.toggleDisabled,
-                }}
+                toggleProps={{ onClick: toggleDisabled }}
             />
         );
-    }
-
-    onChange = (name, value): void => {
-        if (this.props.allowDisable) {
-            this.setState({ inputValue: value });
-        }
-
-        this.props.onChange?.(value);
-    };
-
-    render() {
-        // Extract DisableableInputProps
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { allowDisable, initiallyDisabled, onToggleDisable, hasMixedValue, ...rest } = this.props;
-        // Extract TextAreaInputProps
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { addLabelAsterisk, onChange, queryColumn, renderFieldLabel, showLabel, ...textAreaProps } = rest;
-        const { labelClassName } = textAreaProps;
+    }, [renderFieldLabel, showLabel, queryColumn, isDisabled, label, addLabelAsterisk, allowDisable, toggleDisabled]);
 
-        return (
-            <FormsyTextArea
-                aria-label={showLabel ? undefined : queryColumn.caption}
-                id={stringToHtmlId(queryColumn.fieldKey)}
-                name={queryColumn.fieldKey}
-                placeholder={
-                    hasMixedValue && this.state.isDisabled
-                        ? MIXED_VALUE_DISPLAY
-                        : `Enter ${queryColumn.caption.toLowerCase()}`
-                }
-                required={queryColumn.required}
-                {...textAreaProps}
-                disabled={this.state.isDisabled}
-                label={this.renderLabel()}
-                labelClassName={showLabel ? labelClassName : 'hide-label'}
-                onChange={this.onChange}
-                value={this.getInputValue()}
-            />
-        );
-    }
-}
+    const onChange_ = useCallback(
+        (name, value) => {
+            setInputValue(value);
+            onChange?.(name, value);
+        },
+        [onChange, setInputValue]
+    );
+
+    return (
+        <FormsyTextArea
+            aria-label={showLabel ? undefined : queryColumn.caption}
+            cols={50}
+            placeholder={
+                hasMixedValue && isDisabled_ ? MIXED_VALUE_DISPLAY : `Enter ${queryColumn.caption.toLowerCase()}`
+            }
+            required={queryColumn.required}
+            rows={5}
+            {...formsyTextAreaProps}
+            disabled={isDisabled_}
+            elementWrapperClassName={elementWrapperClassName}
+            id={inputId}
+            label={label_}
+            labelClassName={showLabel ? labelClassName : 'hide-label'}
+            name={queryColumn.fieldKey}
+            onChange={onChange_}
+            value={inputValue}
+        />
+    );
+};
+TextAreaInput.displayName = 'TextAreaInput';
diff --git a/packages/components/src/internal/components/forms/input/TextChoiceInput.tsx b/packages/components/src/internal/components/forms/input/TextChoiceInput.tsx
index 16cbe155a2..54bfb24db9 100644
--- a/packages/components/src/internal/components/forms/input/TextChoiceInput.tsx
+++ b/packages/components/src/internal/components/forms/input/TextChoiceInput.tsx
@@ -2,33 +2,37 @@
  * Copyright (c) 2021-2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
  * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
  */
-import React, { ReactNode } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import { QueryColumn } from '../../../../public/QueryColumn';
 
 import { SelectInput, SelectInputProps } from './SelectInput';
-import { DisableableInput, DisableableInputState } from './DisableableInput';
 
-interface Props extends Omit<SelectInputProps, 'options'> {
+export interface TextChoiceInputProps extends Omit<
+    SelectInputProps,
+    'multiple' | 'name' | 'options' | 'skipJoinValues' | 'sortValues'
+> {
     queryColumn: QueryColumn;
 }
 
-export class TextChoiceInput extends DisableableInput<Props, DisableableInputState> {
-    render(): ReactNode {
-        const { queryColumn, ...selectInputProps } = this.props;
-        const options = queryColumn.validValues?.map(val => ({ label: val, value: val })) ?? [];
+export const TextChoiceInput: FC<TextChoiceInputProps> = props => {
+    const { queryColumn, ...selectInputProps } = props;
+    const options = useMemo(
+        () => queryColumn.validValues?.map(value => ({ label: value, value })) ?? [],
+        [queryColumn]
+    );
 
-        return (
-            <SelectInput
-                label={queryColumn.caption}
-                name={queryColumn.fieldKey}
-                required={queryColumn.required}
-                {...selectInputProps}
-                multiple={queryColumn.isMultiChoice}
-                options={options}
-                skipJoinValues={true}
-                sortValues={true}
-            />
-        );
-    }
-}
+    return (
+        <SelectInput
+            label={queryColumn.caption}
+            required={queryColumn.required}
+            {...selectInputProps}
+            multiple={queryColumn.isMultiChoice}
+            name={queryColumn.fieldKey}
+            options={options}
+            skipJoinValues
+            sortValues
+        />
+    );
+};
+TextChoiceInput.displayName = 'TextChoiceInput';
diff --git a/packages/components/src/internal/components/forms/input/TextInput.test.tsx b/packages/components/src/internal/components/forms/input/TextInput.test.tsx
new file mode 100644
index 0000000000..1bb17a902f
--- /dev/null
+++ b/packages/components/src/internal/components/forms/input/TextInput.test.tsx
@@ -0,0 +1,245 @@
+/*
+ * Copyright (c) 2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
+ * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
+ */
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import { QueryColumn } from '../../../../public/QueryColumn';
+import { Formsy } from '../formsy';
+import { INPUT_LABEL_CLASS_NAME, INPUT_WRAPPER_CLASS_NAME, MIXED_VALUE_DISPLAY } from '../constants';
+
+import { TextInput, TextInputProps } from './TextInput';
+
+const COLUMN = new QueryColumn({ caption: 'Extra Test Column', fieldKey: 'extraTestColumn', name: 'extraTestColumn' });
+const REQUIRED_COLUMN = COLUMN.mutate({ required: true });
+
+const ENABLED_FIELD_SELECTOR = `input[name="${COLUMN.fieldKey}::enabled"]`;
+const TEXT_INPUT_SELECTOR = 'input[type="text"]';
+
+function renderInForm(props?: Partial<TextInputProps>): RenderResult {
+    return render(
+        <Formsy>
+            <TextInput queryColumn={COLUMN} {...props} />
+        </Formsy>
+    );
+}
+
+function textInput(): HTMLInputElement {
+    return document.querySelector(TEXT_INPUT_SELECTOR);
+}
+
+function clickToggle(): Promise<void> {
+    return userEvent.click(document.querySelector('.control-label-toggle-input button:last-child'));
+}
+
+describe('TextInput', () => {
+    describe('label', () => {
+        test('renders the column caption by default', () => {
+            const { container } = renderInForm();
+
+            const label = container.querySelector('label');
+            expect(label).toHaveTextContent('Extra Test Column');
+            expect(label).toHaveClass(...INPUT_LABEL_CLASS_NAME.split(' '));
+            // With a visible label the input is labeled by the <label>, so aria-label would be redundant
+            expect(textInput()).not.toHaveAttribute('aria-label');
+        });
+
+        // The Formsy Control drops the <label> entirely when it is given a null label for an optional column, so the
+        // input carries its accessible name itself, and the wrapper takes the offset the label would have occupied
+        test('drops the label but keeps the input accessible when showLabel is false', () => {
+            const { container } = renderInForm({ showLabel: false });
+
+            expect(container.querySelector('label')).not.toBeInTheDocument();
+            expect(textInput()).toHaveAttribute('aria-label', 'Extra Test Column');
+            expect(container.querySelector('.offset-sm-3')).toBeInTheDocument();
+        });
+
+        // A required column still needs somewhere to hang its asterisk, which is the only case where the
+        // hide-label class is actually used
+        test('keeps a hidden label carrying the asterisk when showLabel is false for a required column', () => {
+            const { container } = renderInForm({ queryColumn: REQUIRED_COLUMN, showLabel: false });
+
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('hide-label');
+            expect(label).toHaveTextContent('*');
+            expect(textInput()).toHaveAttribute('aria-label', 'Extra Test Column');
+        });
+
+        test('renders a caller-supplied label in place of the FieldLabel', () => {
+            const renderFieldLabel = jest.fn().mockReturnValue(<span className="custom-label">Custom</span>);
+            const { container } = renderInForm({ renderFieldLabel });
+
+            expect(renderFieldLabel).toHaveBeenCalledWith(COLUMN);
+            expect(container.querySelector('.custom-label')).toBeInTheDocument();
+            // FieldLabel's overlay is bypassed entirely
+            expect(container.querySelector('.overlay-trigger')).not.toBeInTheDocument();
+        });
+
+        test('renders the required asterisk for a required column', () => {
+            const { container } = renderInForm({ queryColumn: REQUIRED_COLUMN });
+
+            expect(container.querySelector('label')).toHaveTextContent('*');
+            expect(textInput()).toBeRequired();
+        });
+
+        // QueryFormInputs mutates the column to non-required when checkRequiredFields is false, so the asterisk
+        // has to come from the label overlay instead of the Formsy Control
+        test('renders the asterisk without requiring the input when addLabelAsterisk is set', () => {
+            const { container } = renderInForm({ addLabelAsterisk: true });
+
+            expect(container.querySelector('label')).toHaveTextContent('*');
+            expect(textInput()).not.toBeRequired();
+        });
+    });
+
+    describe('input attributes', () => {
+        test('leaves name unencoded', () => {
+            const column = COLUMN.mutate({ fieldKey: 'Lookup/Field', name: 'Lookup/Field' });
+            renderInForm({ queryColumn: column });
+            expect(textInput()).toHaveAttribute('name', 'Lookup/Field');
+        });
+
+        test('honors a caller-supplied id', () => {
+            renderInForm({ id: 'my-own-id' });
+
+            expect(textInput()).toHaveAttribute('id', 'my-own-id');
+        });
+
+        test('applies the default wrapper and label class names', () => {
+            const { container } = renderInForm();
+
+            expect(container.querySelector(`.${INPUT_WRAPPER_CLASS_NAME.split(' ').join('.')}`)).toBeInTheDocument();
+            expect(container.querySelector('label')).toHaveClass(...INPUT_LABEL_CLASS_NAME.split(' '));
+        });
+
+        test('forwards the input type', () => {
+            renderInForm({ type: 'number' });
+
+            expect(document.querySelector('input')).toHaveAttribute('type', 'number');
+        });
+
+        test('placeholder prompts for the caption', () => {
+            renderInForm();
+
+            expect(textInput()).toHaveAttribute('placeholder', 'Enter extra test column');
+        });
+
+        test('placeholder reports a mixed value only while disabled', () => {
+            const { unmount } = renderInForm({ hasMixedValue: true });
+            expect(textInput()).toHaveAttribute('placeholder', 'Enter extra test column');
+            unmount();
+
+            renderInForm({ disabled: true, hasMixedValue: true });
+            expect(textInput()).toHaveAttribute('placeholder', MIXED_VALUE_DISPLAY);
+        });
+
+        test('focuses the input when startFocused is set', () => {
+            const { unmount } = renderInForm();
+            expect(textInput()).not.toHaveFocus();
+            unmount();
+
+            renderInForm({ startFocused: true });
+            expect(textInput()).toHaveFocus();
+        });
+    });
+
+    describe('help text', () => {
+        const NAME_EXPRESSION_COLUMN = COLUMN.mutate({ nameExpression: 'S-${genId}' });
+
+        test('explains that a name expression will generate a value on insert', () => {
+            const { container } = renderInForm({ queryColumn: NAME_EXPRESSION_COLUMN });
+
+            expect(container).toHaveTextContent('A Extra Test Column will be generated if one is not given.');
+        });
+
+        // Issue 52367: a name expression does not re-run on update, so the value is not generated
+        test('omits the message when updating', () => {
+            const { container } = renderInForm({ isUpdate: true, queryColumn: NAME_EXPRESSION_COLUMN });
+
+            expect(container).not.toHaveTextContent('will be generated');
+        });
+
+        test('omits the message for a column without a name expression', () => {
+            const { container } = renderInForm();
+
+            expect(container).not.toHaveTextContent('will be generated');
+        });
+    });
+
+    describe('onChange', () => {
+        test('reports the field key and the new value', async () => {
+            const onChange = jest.fn();
+            renderInForm({ onChange });
+
+            await userEvent.type(textInput(), 'ab');
+
+            expect(onChange).toHaveBeenCalledTimes(2);
+            expect(onChange).toHaveBeenLastCalledWith(COLUMN.fieldKey, 'ab');
+        });
+    });
+
+    describe('internal spaces warning', () => {
+        test('warns once the value contains repeated internal spaces', async () => {
+            const { container } = renderInForm({ includeSpacesWarning: true });
+            expect(container).not.toHaveTextContent('contains multiple spaces');
+
+            await userEvent.type(textInput(), 'a  b');
+
+            expect(textInput()).toHaveValue('a  b');
+            expect(container).toHaveTextContent('This name contains multiple spaces between words.');
+        });
+
+        test('stays silent when not requested', async () => {
+            const { container } = renderInForm();
+
+            await userEvent.type(textInput(), 'a  b');
+
+            expect(container).not.toHaveTextContent('contains multiple spaces');
+        });
+    });
+
+    describe('disabling', () => {
+        test('disables the input when disabled is set', () => {
+            renderInForm({ disabled: true });
+
+            expect(textInput()).toBeDisabled();
+        });
+
+        test('renders no toggle unless allowDisable is set', () => {
+            const { container } = renderInForm();
+
+            expect(container.querySelector('.control-label-toggle-input')).not.toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).not.toBeInTheDocument();
+        });
+
+        test('starts disabled when initiallyDisabled is set', () => {
+            const { container } = renderInForm({ allowDisable: true, initiallyDisabled: true });
+
+            expect(textInput()).toBeDisabled();
+            expect(container.querySelector('.fa-toggle-off')).toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'false');
+        });
+
+        test('discards local edits when the field is toggled off', async () => {
+            const onToggleDisable = jest.fn();
+            const { container } = renderInForm({ allowDisable: true, onToggleDisable, value: 'fromProps' });
+
+            expect(textInput()).toBeEnabled();
+            expect(container.querySelector('.fa-toggle-on')).toBeInTheDocument();
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'true');
+
+            await userEvent.clear(textInput());
+            await userEvent.type(textInput(), 'edited');
+            expect(textInput()).toHaveValue('edited');
+
+            await clickToggle();
+
+            expect(onToggleDisable).toHaveBeenLastCalledWith(true);
+            expect(textInput()).toBeDisabled();
+            expect(textInput()).toHaveValue('fromProps');
+            expect(container.querySelector(ENABLED_FIELD_SELECTOR)).toHaveAttribute('value', 'false');
+        });
+    });
+});
diff --git a/packages/components/src/internal/components/forms/input/TextInput.tsx b/packages/components/src/internal/components/forms/input/TextInput.tsx
index ed34b3e431..c0cc5aa850 100644
--- a/packages/components/src/internal/components/forms/input/TextInput.tsx
+++ b/packages/components/src/internal/components/forms/input/TextInput.tsx
@@ -2,21 +2,18 @@
  * Copyright (c) 2019-2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
  * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
  */
-import React, { ReactNode, RefObject } from 'react';
-
-import { FieldLabel } from '../FieldLabel';
+import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { QueryColumn } from '../../../../public/QueryColumn';
-
+import { FieldLabel } from '../FieldLabel';
 import { INPUT_LABEL_CLASS_NAME, INPUT_WRAPPER_CLASS_NAME, MIXED_VALUE_DISPLAY } from '../constants';
-
 import { FormsyInput, FormsyInputProps } from './FormsyReactComponents';
-import { DisableableInput, DisableableInputProps, DisableableInputState } from './DisableableInput';
+import { DisableableInputProps, useDisableableInput } from './DisableableInput';
 import { InternalSpacesWarning } from '../InternalSpacesWarning';
+import { generateId } from '../../../util/utils';
 
-export interface TextInputProps extends DisableableInputProps, Omit<FormsyInputProps, 'onChange'> {
+export interface TextInputProps extends DisableableInputProps, Omit<FormsyInputProps, 'name' | 'onChange'> {
     addLabelAsterisk?: boolean;
-    disableInput?: boolean;
     includeSpacesWarning?: boolean;
     isUpdate?: boolean;
     onChange?: (name: string, value: any) => void;
@@ -26,61 +23,49 @@ export interface TextInputProps extends DisableableInputProps, Omit<FormsyInputP
     startFocused?: boolean;
 }
 
-interface TextInputState extends DisableableInputState {
-    didFocus?: boolean;
-}
-
-export class TextInput extends DisableableInput<TextInputProps, TextInputState> {
-    static defaultProps = {
-        ...DisableableInput.defaultProps,
-        ...{
-            elementWrapperClassName: INPUT_WRAPPER_CLASS_NAME,
-            labelClassName: INPUT_LABEL_CLASS_NAME,
-            showLabel: true,
-            startFocused: false,
-        },
-    };
-
-    textInput: RefObject<any>;
-
-    constructor(props: TextInputProps) {
-        super(props);
-
-        this.toggleDisabled = this.toggleDisabled.bind(this);
-
-        this.state = {
-            didFocus: false,
-            isDisabled: props.initiallyDisabled,
-            inputValue: props.value,
-        };
-
-        this.textInput = React.createRef();
-    }
-
-    componentDidMount(): void {
-        const { queryColumn, startFocused } = this.props;
-        const { didFocus } = this.state;
-
-        if (startFocused && !didFocus && queryColumn && queryColumn.name) {
-            this.textInput.current?.focus();
-            this.setState({ didFocus: true });
+export const TextInput: FC<TextInputProps> = props => {
+    // Extract DisableableInputProps, TextInputProps
+    const {
+        addLabelAsterisk,
+        allowDisable,
+        disabled,
+        elementWrapperClassName = INPUT_WRAPPER_CLASS_NAME,
+        hasMixedValue,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        initiallyDisabled,
+        label,
+        labelClassName = INPUT_LABEL_CLASS_NAME,
+        onChange,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onToggleDisable,
+        renderFieldLabel,
+        queryColumn,
+        showLabel = true,
+        startFocused = false,
+        id,
+        includeSpacesWarning,
+        isUpdate,
+        ...formsyInputProps
+    } = props;
+    const [didFocus, setDidFocus] = useState(false);
+    const { inputValue, isDisabled, localValue, setInputValue, toggleDisabled } = useDisableableInput<string>(props);
+    const textInputRef = useRef(null);
+    const [inputId] = useState(() => id ?? generateId('textInput-'));
+    const isDisabled_ = isDisabled || disabled;
+
+    useEffect(() => {
+        if (startFocused && !didFocus && queryColumn.name) {
+            textInputRef.current?.focus();
+            setDidFocus(true);
         }
-    }
-
-    shouldComponentUpdate(nextProps: TextInputProps, nextState: TextInputState): boolean {
-        return this.state.didFocus === nextState.didFocus;
-    }
-
-    renderLabel() {
-        const { label, queryColumn, showLabel, allowDisable, addLabelAsterisk, renderFieldLabel } = this.props;
-        const { isDisabled } = this.state;
+    }, [didFocus, queryColumn, startFocused]);
 
+    const label_ = useMemo(() => {
         if (renderFieldLabel) {
             return renderFieldLabel(queryColumn);
         }
 
-        // This is here (at least for now) because of the use of the hide-label class below
-        // in place of sending showLabel=false???
+        // Control emits a <label> unless this is null, so FieldLabel's showLabel guard is too late
         if (showLabel === false) {
             return null;
         }
@@ -90,69 +75,50 @@ export class TextInput extends DisableableInput<TextInputProps, TextInputState>
                 column={queryColumn}
                 isDisabled={isDisabled}
                 label={label}
-                labelOverlayProps={{ isFormsy: true, addLabelAsterisk }}
+                labelOverlayProps={{ addLabelAsterisk, isFormsy: true }}
                 showLabel={showLabel}
                 showToggle={allowDisable}
-                toggleProps={{
-                    onClick: this.toggleDisabled,
-                }}
+                toggleProps={{ onClick: toggleDisabled }}
             />
         );
-    }
-
-    onChange = (name: string, value: any): void => {
-        this.setState({ inputValue: value });
-        this.props.onChange?.(name, value);
-    };
-
-    render() {
-        // Extract DisableableInputProps
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { allowDisable, initiallyDisabled, onToggleDisable, ...rest } = this.props;
-        // Extract TextInputProps
-        const {
-            addLabelAsterisk,
-            disableInput,
-            labelClassName,
-            renderFieldLabel,
-            queryColumn,
-            showLabel,
-            startFocused,
-            includeSpacesWarning,
-            isUpdate,
-            hasMixedValue,
-            ...inputProps
-        } = rest;
+    }, [renderFieldLabel, showLabel, queryColumn, isDisabled, label, addLabelAsterisk, allowDisable, toggleDisabled]);
 
-        let help: string;
-        // Issue 52367: Don't show the message if we have a name that can be edited
-        if (queryColumn.nameExpression && !isUpdate) {
-            help = `A ${queryColumn.caption} will be generated if one is not given.`;
-        }
+    const onChange_ = useCallback(
+        (name, value) => {
+            setInputValue(value);
+            onChange?.(name, value);
+        },
+        [onChange, setInputValue]
+    );
 
-        const isDisabled = this.state.isDisabled || disableInput;
-        return (
-            <>
-                <FormsyInput
-                    aria-label={showLabel ? undefined : queryColumn.caption}
-                    id={queryColumn.fieldKey}
-                    name={queryColumn.fieldKey}
-                    placeholder={
-                        hasMixedValue && isDisabled ? MIXED_VALUE_DISPLAY : `Enter ${queryColumn.caption.toLowerCase()}`
-                    }
-                    required={queryColumn.required}
-                    {...inputProps}
-                    componentRef={this.textInput}
-                    disabled={isDisabled}
-                    help={help}
-                    label={this.renderLabel()}
-                    labelClassName={showLabel ? labelClassName : 'hide-label'}
-                    onChange={this.onChange}
-                    type="text"
-                    value={this.getInputValue()}
-                />
-                {includeSpacesWarning && <InternalSpacesWarning value={this.state.inputValue} />}
-            </>
-        );
+    let help: string;
+    // Issue 52367: Do not show the message if we have a name that can be edited
+    if (queryColumn.nameExpression && !isUpdate) {
+        help = `A ${queryColumn.caption} will be generated if one is not given.`;
     }
-}
+
+    return (
+        <>
+            <FormsyInput
+                aria-label={showLabel ? undefined : queryColumn.caption}
+                placeholder={
+                    hasMixedValue && isDisabled_ ? MIXED_VALUE_DISPLAY : `Enter ${queryColumn.caption.toLowerCase()}`
+                }
+                required={queryColumn.required}
+                {...formsyInputProps}
+                componentRef={textInputRef}
+                disabled={isDisabled_}
+                elementWrapperClassName={elementWrapperClassName}
+                help={help}
+                id={inputId}
+                label={label_}
+                labelClassName={showLabel ? labelClassName : 'hide-label'}
+                name={queryColumn.fieldKey}
+                onChange={onChange_}
+                value={inputValue}
+            />
+            {includeSpacesWarning && <InternalSpacesWarning value={localValue} />}
+        </>
+    );
+};
+TextInput.displayName = 'TextInput';