diff --git a/app/components/form/fields/RadioField.tsx b/app/components/form/fields/RadioField.tsx
index 04e3b99ce6..d69a4a5b9c 100644
--- a/app/components/form/fields/RadioField.tsx
+++ b/app/components/form/fields/RadioField.tsx
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { useId, type default as React } from 'react'
+import { useId } from 'react'
 import {
   useController,
   type Control,
diff --git a/app/table/QueryTable.tsx b/app/table/QueryTable.tsx
index 74a464d000..bf25f9c361 100644
--- a/app/table/QueryTable.tsx
+++ b/app/table/QueryTable.tsx
@@ -7,7 +7,7 @@
  */
 import { useQuery } from '@tanstack/react-query'
 import { getCoreRowModel, useReactTable, type ColumnDef } from '@tanstack/react-table'
-import { useEffect, useMemo, useRef, type default as React } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 import { ensurePrefetched, type PaginatedQuery, type ResultsPage } from '@oxide/api'
 
diff --git a/app/ui/lib/AuthCodeInput.tsx b/app/ui/lib/AuthCodeInput.tsx
index 94828d93a4..2c10c1e162 100644
--- a/app/ui/lib/AuthCodeInput.tsx
+++ b/app/ui/lib/AuthCodeInput.tsx
@@ -14,13 +14,7 @@
  *   license that can be found in the LICENSE file or at
  *   https://opensource.org/licenses/MIT.
  */
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  type default as React,
-} from 'react'
+import { useEffect, useRef } from 'react'
 
 import { KEYS } from '~/ui/util/keys'
 import { invariant } from '~/util/invariant'
@@ -38,11 +32,6 @@ export type AuthCodeProps = {
   dashAfterIdxs?: number[]
 }
 
-export type AuthCodeRef = {
-  focus: () => void
-  clear: () => void
-}
-
 const INPUT_PATTERN = '[a-zA-Z]{1}'
 
 // the reason these helpers are here is we to skip the dashes when we're looking
@@ -77,157 +66,133 @@ const Dash = () => (
 )
 
 // See https://github.com/drac94/react-auth-code-input
-export const AuthCodeInput = forwardRef<AuthCodeRef, AuthCodeProps>(
-  (
-    {
-      ariaLabel,
-      autoFocus = true,
-      containerClassName,
-      disabled,
-      inputClassName,
-      length = 6,
-      placeholder,
-      onChange,
-      dashAfterIdxs = [],
-    },
-    ref
-  ) => {
-    invariant(!isNaN(length) || length > 0, 'Length must be a number greater than 0')
-    invariant(
-      dashAfterIdxs.every((i) => 0 <= i && i < length - 1),
-      '"Dash after" indices must mark spots between inputs, i.e., 0 <= i < length - 1'
-    )
-
-    const inputsRef = useRef<Array<HTMLInputElement>>([])
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        if (inputsRef.current) {
-          inputsRef.current[0].focus()
-        }
-      },
-      clear: () => {
-        if (inputsRef.current) {
-          for (const input of inputsRef.current) {
-            input.value = ''
-          }
-          inputsRef.current[0].focus()
-        }
-        sendResult()
-      },
-    }))
-
-    useEffect(() => {
-      if (autoFocus) {
-        inputsRef.current[0].focus()
-      }
-    }, [autoFocus])
-
-    const sendResult = () => {
-      // user_code is always uppercase
-      // https://github.com/oxidecomputer/omicron/blob/c63fe1658674186d974e3287afdce09b07912afd/nexus/db-model/src/device_auth.rs#L72-L77
-      const res = inputsRef.current
-        .map((input) => input.value)
-        .join('')
-        .toUpperCase()
-      onChange?.(res)
+export function AuthCodeInput({
+  ariaLabel,
+  autoFocus = true,
+  containerClassName,
+  disabled,
+  inputClassName,
+  length = 6,
+  placeholder,
+  onChange,
+  dashAfterIdxs = [],
+}: AuthCodeProps) {
+  invariant(!isNaN(length) || length > 0, 'Length must be a number greater than 0')
+  invariant(
+    dashAfterIdxs.every((i) => 0 <= i && i < length - 1),
+    '"Dash after" indices must mark spots between inputs, i.e., 0 <= i < length - 1'
+  )
+
+  const inputsRef = useRef<Array<HTMLInputElement>>([])
+
+  useEffect(() => {
+    if (autoFocus) {
+      inputsRef.current[0].focus()
     }
+  }, [autoFocus])
+
+  const sendResult = () => {
+    // user_code is always uppercase
+    // https://github.com/oxidecomputer/omicron/blob/c63fe1658674186d974e3287afdce09b07912afd/nexus/db-model/src/device_auth.rs#L72-L77
+    const res = inputsRef.current
+      .map((input) => input.value)
+      .join('')
+      .toUpperCase()
+    onChange?.(res)
+  }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { value } = e.target
-      const nextInput = getNextInputSibling(e.target)
-      if (value.length > 1) {
-        e.target.value = value.charAt(0)
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    const nextInput = getNextInputSibling(e.target)
+    if (value.length > 1) {
+      e.target.value = value.charAt(0)
+      if (nextInput) {
+        nextInput.focus()
+      }
+    } else {
+      if (value.match(INPUT_PATTERN)) {
         if (nextInput) {
           nextInput.focus()
         }
       } else {
-        if (value.match(INPUT_PATTERN)) {
-          if (nextInput) {
-            nextInput.focus()
-          }
-        } else {
-          e.target.value = ''
-        }
+        e.target.value = ''
       }
-      sendResult()
     }
+    sendResult()
+  }
 
-    const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      const target = e.target as HTMLInputElement
-      if (e.key === KEYS.backspace) {
-        if (target.value === '') {
-          const prevInput = getPrevInputSibling(target)
-          if (prevInput !== null) {
-            prevInput.value = ''
-            prevInput.focus()
-            e.preventDefault()
-          }
-        } else {
-          target.value = ''
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement
+    if (e.key === KEYS.backspace) {
+      if (target.value === '') {
+        const prevInput = getPrevInputSibling(target)
+        if (prevInput !== null) {
+          prevInput.value = ''
+          prevInput.focus()
+          e.preventDefault()
         }
-        sendResult()
+      } else {
+        target.value = ''
       }
+      sendResult()
     }
+  }
 
-    const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-      e.target.select()
-    }
+  const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }
 
-    const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-      const pastedValue = e.clipboardData.getData('Text')
-
-      let currentInput = 0
-
-      for (let i = 0; i < pastedValue.length; i++) {
-        const pastedCharacter = pastedValue.charAt(i)
-        const currentValue = inputsRef.current[currentInput].value
-        if (pastedCharacter.match(INPUT_PATTERN) && !currentValue) {
-          const input = inputsRef.current[currentInput]
-          input.value = pastedCharacter
-          const nextInput = getNextInputSibling(input)
-          if (nextInput !== null) {
-            nextInput.focus()
-            currentInput++
-          }
-        }
-      }
-      sendResult()
+  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const pastedValue = e.clipboardData.getData('Text')
 
-      e.preventDefault()
-    }
+    let currentInput = 0
 
-    const inputs = []
-    for (let i = 0; i < length; i++) {
-      inputs.push(
-        <input
-          key={i}
-          type="text"
-          inputMode="text"
-          onChange={handleOnChange}
-          onKeyDown={handleOnKeyDown}
-          onFocus={handleOnFocus}
-          onPaste={handleOnPaste}
-          pattern={INPUT_PATTERN}
-          ref={(el: HTMLInputElement) => {
-            inputsRef.current[i] = el
-          }}
-          maxLength={1}
-          className={inputClassName}
-          autoComplete="off"
-          aria-label={
-            ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`
-          }
-          disabled={disabled}
-          placeholder={placeholder}
-        />
-      )
-
-      if (dashAfterIdxs.includes(i)) {
-        inputs.push(<Dash key={`${i}-dash`} />)
+    for (let i = 0; i < pastedValue.length; i++) {
+      const pastedCharacter = pastedValue.charAt(i)
+      const currentValue = inputsRef.current[currentInput].value
+      if (pastedCharacter.match(INPUT_PATTERN) && !currentValue) {
+        const input = inputsRef.current[currentInput]
+        input.value = pastedCharacter
+        const nextInput = getNextInputSibling(input)
+        if (nextInput !== null) {
+          nextInput.focus()
+          currentInput++
+        }
       }
     }
+    sendResult()
 
-    return <div className={containerClassName}>{inputs}</div>
+    e.preventDefault()
   }
-)
+
+  const inputs = []
+  for (let i = 0; i < length; i++) {
+    inputs.push(
+      <input
+        key={i}
+        type="text"
+        inputMode="text"
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        onFocus={handleOnFocus}
+        onPaste={handleOnPaste}
+        pattern={INPUT_PATTERN}
+        ref={(el: HTMLInputElement) => {
+          inputsRef.current[i] = el
+        }}
+        maxLength={1}
+        className={inputClassName}
+        autoComplete="off"
+        aria-label={ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+    )
+
+    if (dashAfterIdxs.includes(i)) {
+      inputs.push(<Dash key={`${i}-dash`} />)
+    }
+  }
+
+  return <div className={containerClassName}>{inputs}</div>
+}
diff --git a/app/ui/lib/DialogOverlay.tsx b/app/ui/lib/DialogOverlay.tsx
index 4fbe391925..e0dfd12ce0 100644
--- a/app/ui/lib/DialogOverlay.tsx
+++ b/app/ui/lib/DialogOverlay.tsx
@@ -7,9 +7,13 @@
  */
 
 import * as m from 'motion/react-m'
-import { forwardRef } from 'react'
+import { type Ref } from 'react'
 
-export const DialogOverlay = forwardRef<HTMLDivElement>((_, ref) => (
+type Props = {
+  ref?: Ref<HTMLDivElement>
+}
+
+export const DialogOverlay = ({ ref }: Props) => (
   <m.div
     ref={ref}
     aria-hidden
@@ -19,4 +23,4 @@ export const DialogOverlay = forwardRef<HTMLDivElement>((_, ref) => (
     exit={{ opacity: 0 }}
     transition={{ duration: 0.15, ease: 'easeOut' }}
   />
-))
+)
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index f70954c30c..d4e15ee0f9 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -14,7 +14,7 @@ import {
   type MenuItemsProps,
 } from '@headlessui/react'
 import cn from 'classnames'
-import { forwardRef, type ForwardedRef, type ReactNode } from 'react'
+import { type ReactNode, type Ref } from 'react'
 import { Link } from 'react-router'
 
 export const Root = Menu
@@ -60,26 +60,24 @@ export function LinkItem({ className, to, children }: LinkItemProps) {
   )
 }
 
-type ButtonRef = ForwardedRef<HTMLButtonElement>
 type ItemProps = {
   className?: string
   onSelect?: () => void
   children: ReactNode
   disabled?: boolean
+  ref?: Ref<HTMLButtonElement>
 }
 
 // need to forward ref because of tooltips on disabled menu buttons
-export const Item = forwardRef(
-  ({ className, onSelect, children, disabled }: ItemProps, ref: ButtonRef) => (
-    <MenuItem disabled={disabled}>
-      <button
-        type="button"
-        className={cn('DropdownMenuItem ox-menu-item', className)}
-        ref={ref}
-        onClick={onSelect}
-      >
-        {children}
-      </button>
-    </MenuItem>
-  )
+export const Item = ({ className, onSelect, children, disabled, ref }: ItemProps) => (
+  <MenuItem disabled={disabled}>
+    <button
+      type="button"
+      className={cn('DropdownMenuItem ox-menu-item', className)}
+      ref={ref}
+      onClick={onSelect}
+    >
+      {children}
+    </button>
+  </MenuItem>
 )
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 09b348cd64..38302be29f 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -8,12 +8,12 @@
 import cn from 'classnames'
 import { filesize } from 'filesize'
 import {
-  forwardRef,
   useRef,
   useState,
   type ChangeEvent,
   type ComponentProps,
   type MouseEvent,
+  type Ref,
 } from 'react'
 import { mergeRefs } from 'react-merge-refs'
 
@@ -24,102 +24,106 @@ import { Truncate } from '~/ui/lib/Truncate'
 export type FileInputProps = Omit<ComponentProps<'input'>, 'type' | 'onChange'> & {
   onChange: (f: File | null) => void
   error?: boolean
+  ref?: Ref<HTMLInputElement>
 }
 
 // Wrapping a file input in a `<label>` grants the ability to fully
 // customize the component whilst maintaining the native functionality
 // and preserving it as an uncontrolled input
-export const FileInput = forwardRef(
-  ({ accept, className, onChange, error, ...inputProps }: FileInputProps, forwardedRef) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const [file, setFile] = useState<File | null>(null)
-    const [dragOver, setDragOver] = useState(false)
+export function FileInput({
+  accept,
+  className,
+  onChange,
+  error,
+  ref,
+  ...inputProps
+}: FileInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [file, setFile] = useState<File | null>(null)
+  const [dragOver, setDragOver] = useState(false)
 
-    const handleChange = (evt: ChangeEvent) => {
-      const target = evt.target as HTMLInputElement
-      const targetFile = target.files ? target.files[0] : null
+  const handleChange = (evt: ChangeEvent) => {
+    const target = evt.target as HTMLInputElement
+    const targetFile = target.files ? target.files[0] : null
 
-      setFile(targetFile)
-      setDragOver(false)
-      onChange?.(targetFile)
-    }
-
-    const handleResetInput = (evt: MouseEvent) => {
-      setFile(null)
-      onChange?.(null)
-      if (inputRef && inputRef.current) {
-        inputRef.current.value = ''
-      }
+    setFile(targetFile)
+    setDragOver(false)
+    onChange?.(targetFile)
+  }
 
-      // Stop reset button click from opening file input
-      evt.preventDefault()
+  const handleResetInput = (evt: MouseEvent) => {
+    setFile(null)
+    onChange?.(null)
+    if (inputRef && inputRef.current) {
+      inputRef.current.value = ''
     }
 
-    return (
-      <label className={cn(className, 'group relative block')}>
-        <input
-          ref={mergeRefs([inputRef, forwardedRef])}
-          type="file"
-          name="file"
-          className={cn(
-            '-z-1 absolute inset-0 w-full cursor-pointer rounded',
-            error && 'focus-error'
-          )}
-          {...inputProps}
-          onChange={handleChange}
-          onDragEnter={() => setDragOver(true)}
-          onDragLeave={() => setDragOver(false)}
-          onDrop={() => setDragOver(false)}
-        />
+    // Stop reset button click from opening file input
+    evt.preventDefault()
+  }
+
+  return (
+    <label className={cn(className, 'group relative block')}>
+      <input
+        ref={mergeRefs([inputRef, ref])}
+        type="file"
+        name="file"
+        className={cn(
+          '-z-1 absolute inset-0 w-full cursor-pointer rounded',
+          error && 'focus-error'
+        )}
+        {...inputProps}
+        onChange={handleChange}
+        onDragEnter={() => setDragOver(true)}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={() => setDragOver(false)}
+      />
+      <div
+        className={cn(
+          'z-1 pointer-events-none relative flex flex-col items-center justify-center space-y-2 rounded border px-4 py-6 text-raise bg-default',
+          dragOver && 'bg-accent-secondary !border-accent-secondary',
+          error
+            ? '!border-error-secondary group-hover:border-error'
+            : 'border-default group-hover:border-hover'
+        )}
+      >
         <div
           className={cn(
-            'z-1 pointer-events-none relative flex flex-col items-center justify-center space-y-2 rounded border px-4 py-6 text-raise bg-default',
-            dragOver && 'bg-accent-secondary !border-accent-secondary',
-            error
-              ? '!border-error-secondary group-hover:border-error'
-              : 'border-default group-hover:border-hover'
+            'flex items-center justify-center rounded p-1 text-accent bg-accent-secondary',
+            dragOver && 'bg-accent-secondary-hover'
           )}
         >
-          <div
-            className={cn(
-              'flex items-center justify-center rounded p-1 text-accent bg-accent-secondary',
-              dragOver && 'bg-accent-secondary-hover'
-            )}
-          >
-            <Document16Icon className="h-4 w-4" />
-          </div>
-          <div className="flex h-8 items-center text-sans-md">
-            {file && !dragOver ? (
-              <div className="flex items-center text-raise">
-                <Truncate text={file.name} maxLength={32} position="middle" />
-                <span className="ml-1 text-tertiary">
-                  ({filesize(file.size, { base: 2, pad: true })})
-                </span>
-                <button
-                  type="button"
-                  onClick={handleResetInput}
-                  className="pointer-events-auto ml-1 inline-flex rounded p-1 hover:children:text-secondary"
-                  aria-label="Clear file"
-                >
-                  <Error16Icon className="text-tertiary" />
-                </button>
-              </div>
-            ) : (
-              <>
-                Drop a file or click to browse{' '}
-                {accept && (
-                  <span className="ml-1 text-tertiary">
-                    ({removeLeadingPeriods(accept)})
-                  </span>
-                )}
-              </>
-            )}
-          </div>
+          <Document16Icon className="h-4 w-4" />
         </div>
-      </label>
-    )
-  }
-)
+        <div className="flex h-8 items-center text-sans-md">
+          {file && !dragOver ? (
+            <div className="flex items-center text-raise">
+              <Truncate text={file.name} maxLength={32} position="middle" />
+              <span className="ml-1 text-tertiary">
+                ({filesize(file.size, { base: 2, pad: true })})
+              </span>
+              <button
+                type="button"
+                onClick={handleResetInput}
+                className="pointer-events-auto ml-1 inline-flex rounded p-1 hover:children:text-secondary"
+                aria-label="Clear file"
+              >
+                <Error16Icon className="text-tertiary" />
+              </button>
+            </div>
+          ) : (
+            <>
+              Drop a file or click to browse{' '}
+              {accept && (
+                <span className="ml-1 text-tertiary">({removeLeadingPeriods(accept)})</span>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </label>
+  )
+}
 
 // Takes an accept prop formatted like `accept=".doc,.docx,.tar.gz"` or
 // `accept=".doc, .docx, .tar.gz"` removes the leading period and
diff --git a/app/ui/lib/NumberInput.tsx b/app/ui/lib/NumberInput.tsx
index 941cf89698..477552965c 100644
--- a/app/ui/lib/NumberInput.tsx
+++ b/app/ui/lib/NumberInput.tsx
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import React, { useRef } from 'react'
+import { useRef, type Ref } from 'react'
 import {
   useButton,
   useLocale,
@@ -17,15 +17,13 @@ import {
 import { mergeRefs } from 'react-merge-refs'
 import { useNumberFieldState } from 'react-stately'
 
-export type NumberInputProps = {
+type NumberInputProps = AriaNumberFieldProps & {
   className?: string
   error?: boolean
+  ref?: Ref<HTMLInputElement>
 }
 
-export const NumberInput = React.forwardRef<
-  HTMLInputElement,
-  AriaNumberFieldProps & NumberInputProps
->((props: AriaNumberFieldProps & NumberInputProps, forwardedRef) => {
+export function NumberInput(props: NumberInputProps) {
   const { locale } = useLocale()
   const state = useNumberFieldState({ ...props, locale })
 
@@ -47,7 +45,7 @@ export const NumberInput = React.forwardRef<
     >
       <input
         {...inputProps}
-        ref={mergeRefs([forwardedRef, inputRef])}
+        ref={mergeRefs([props.ref, inputRef])}
         className={cn(
           `w-full rounded border-none px-3 py-[0.6875rem] !outline-offset-1 text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
           props.error && 'focus-error',
@@ -65,7 +63,7 @@ export const NumberInput = React.forwardRef<
       </div>
     </div>
   )
-})
+}
 
 function IncrementButton(props: AriaButtonProps<'button'> & { className?: string }) {
   const ref = useRef(null)
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 0d0ca7e31e..f1848c8874 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -8,7 +8,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import cn from 'classnames'
 import * as m from 'motion/react-m'
-import { useRef, type default as React, type ReactNode } from 'react'
+import { useRef, type ReactNode } from 'react'
 
 import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react'
 
diff --git a/app/ui/lib/TextInput.tsx b/app/ui/lib/TextInput.tsx
index 13923bd7da..d602f7ffde 100644
--- a/app/ui/lib/TextInput.tsx
+++ b/app/ui/lib/TextInput.tsx
@@ -7,7 +7,7 @@
  */
 import { announce } from '@react-aria/live-announcer'
 import cn from 'classnames'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import type { Merge } from 'type-fest'
 
 import { CopyToClipboard } from './CopyToClipboard'
@@ -49,63 +49,56 @@ export type TextInputBaseProps = Merge<
   }
 >
 
-export const TextInput = React.forwardRef<
-  HTMLInputElement,
-  TextInputBaseProps & TextAreaProps
->(
-  (
-    {
-      type = 'text',
-      value,
-      error,
-      className,
-      disabled,
-      fieldClassName,
-      copyable,
-      as: asProp,
-      ...fieldProps
-    },
-    ref
-  ) => {
-    const Component = asProp || 'input'
-    return (
-      <div
+export function TextInput({
+  type = 'text',
+  value,
+  error,
+  className,
+  disabled,
+  fieldClassName,
+  copyable,
+  as: asProp,
+  ref,
+  ...fieldProps
+}: TextInputBaseProps & TextAreaProps) {
+  const Component = asProp || 'input'
+  return (
+    <div
+      className={cn(
+        'flex items-center rounded border',
+        error
+          ? 'border-error-secondary hover:border-error'
+          : 'border-default hover:border-hover',
+        disabled && '!border-default',
+        className
+      )}
+    >
+      <Component
+        // @ts-expect-error this is fine, it's just mad because Component is a variable
+        ref={ref}
+        type={type}
+        value={value}
         className={cn(
-          'flex items-center rounded border',
-          error
-            ? 'border-error-secondary hover:border-error'
-            : 'border-default hover:border-hover',
-          disabled && '!border-default',
-          className
+          `w-full rounded border-none px-3 py-[0.6875rem] !outline-offset-1 text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
+          error && 'focus-error',
+          fieldClassName,
+          disabled && 'text-disabled bg-disabled',
+          copyable && 'pr-0'
         )}
-      >
-        <Component
-          // @ts-expect-error this is fine, it's just mad because Component is a variable
-          ref={ref}
-          type={type}
-          value={value}
-          className={cn(
-            `w-full rounded border-none px-3 py-[0.6875rem] !outline-offset-1 text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
-            error && 'focus-error',
-            fieldClassName,
-            disabled && 'text-disabled bg-disabled',
-            copyable && 'pr-0'
-          )}
-          aria-invalid={error}
-          disabled={disabled}
-          spellCheck={false}
-          {...fieldProps}
+        aria-invalid={error}
+        disabled={disabled}
+        spellCheck={false}
+        {...fieldProps}
+      />
+      {copyable && (
+        <CopyToClipboard
+          text={value || ''}
+          className="!h-10 rounded-none border-l border-solid px-4 bg-disabled border-default"
         />
-        {copyable && (
-          <CopyToClipboard
-            text={value || ''}
-            className="!h-10 rounded-none border-l border-solid px-4 bg-disabled border-default"
-          />
-        )}
-      </div>
-    )
-  }
-)
+      )}
+    </div>
+  )
+}
 
 type HintProps = {
   // ID required as a reminder to pass aria-describedby on TextField
diff --git a/app/util/classed.ts b/app/util/classed.ts
index ff6cfff146..e51ecd83a8 100644
--- a/app/util/classed.ts
+++ b/app/util/classed.ts
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import React, { forwardRef, type JSX } from 'react'
+import React, { type JSX } from 'react'
 
 // all the cuteness of tw.span`text-green-500 uppercase` with zero magic
 
@@ -14,14 +14,8 @@ const make =
   <T extends keyof JSX.IntrinsicElements>(tag: T) =>
   // only one argument here means string interpolations are not allowed
   (strings: TemplateStringsArray) => {
-    const Comp = forwardRef(
-      ({ className, children, ...rest }: JSX.IntrinsicElements[T], ref) =>
-        React.createElement(
-          tag,
-          { className: cn(strings[0], className), ...rest, ref },
-          children
-        )
-    )
+    const Comp = ({ className, ...rest }: JSX.IntrinsicElements[T]) =>
+      React.createElement(tag, { className: cn(strings[0], className), ...rest })
     Comp.displayName = `classed.${tag}`
     return Comp
   }