diff --git a/app/components/form/Subform.browser.spec.tsx b/app/components/form/Subform.browser.spec.tsx
new file mode 100644
index 0000000000..4e3a64ef13
--- /dev/null
+++ b/app/components/form/Subform.browser.spec.tsx
@@ -0,0 +1,132 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useState } from 'react'
+import { afterEach, beforeEach, expect, test, vi } from 'vitest'
+import { render, type RenderResult } from 'vitest-browser-react'
+import { commands, userEvent } from 'vitest/browser'
+
+import { Combobox, toComboboxItems } from '~/ui/lib/Combobox'
+
+import { Subform } from './Subform'
+
+// Combobox's onClose behaves differently when the document is unfocused, and
+// the test iframe's focus state is nondeterministic. See Combobox.browser.spec.tsx.
+beforeEach(() => {
+  vi.spyOn(document, 'hasFocus').mockReturnValue(true)
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+const items = toComboboxItems([{ name: 'disk-3' }, { name: 'disk-4' }])
+
+// Filling alone doesn't reliably leave the first option highlighted (Firefox
+// CI pressed Enter with nothing active), so open the list and Home to it
+// explicitly, like Combobox.browser.spec.tsx does
+async function highlightFirstOption(screen: RenderResult, label: string) {
+  const combobox = screen.getByRole('combobox', { name: label })
+  await combobox.fill('disk')
+  await commands.pressComboboxKey(label, 'ArrowDown')
+  const option = screen.getByRole('option', { name: 'disk-3' })
+  await expect.element(option).toBeVisible()
+  await commands.pressComboboxKey(label, 'Home')
+  await expect
+    .element(combobox)
+    .toHaveAttribute('aria-activedescendant', option.element().id)
+}
+
+function Harness() {
+  const [inner, setInner] = useState('')
+  const [outer, setOuter] = useState('')
+  const [formSubmits, setFormSubmits] = useState(0)
+  const [subformSubmits, setSubformSubmits] = useState(0)
+
+  return (
+    <form
+      aria-label="Parent form"
+      onSubmit={(event) => {
+        event.preventDefault()
+        setFormSubmits((count) => count + 1)
+      }}
+    >
+      <Combobox
+        items={items}
+        label="Outer disk"
+        selectedItemValue={outer}
+        onChange={setOuter}
+      />
+      <Subform
+        onSubmit={() => setSubformSubmits((count) => count + 1)}
+        onClear={() => {}}
+        addButtonLabel="Add"
+        disabled={false}
+      >
+        <Combobox
+          items={items}
+          label="Inner disk"
+          selectedItemValue={inner}
+          onChange={setInner}
+        />
+        <input aria-label="Port" />
+      </Subform>
+      <button type="submit">Submit</button>
+      <output>Inner: {inner || '(empty)'}</output>
+      <output>Outer: {outer || '(empty)'}</output>
+      <output>Form submits: {formSubmits}</output>
+      <output>Subform submits: {subformSubmits}</output>
+    </form>
+  )
+}
+
+test('Enter selects while open, then submits the subform once closed', async () => {
+  const screen = await render(<Harness />)
+
+  await highlightFirstOption(screen, 'Inner disk')
+  await commands.pressComboboxKey('Inner disk', 'Enter')
+  await expect.element(screen.getByText('Inner: disk-3')).toBeVisible()
+  await expect.element(screen.getByText('Subform submits: 0')).toBeVisible()
+
+  await commands.pressComboboxKey('Inner disk', 'Enter')
+  await expect.element(screen.getByText('Subform submits: 1')).toBeVisible()
+  await expect.element(screen.getByText('Form submits: 0')).toBeVisible()
+})
+
+test('Enter in a text input submits the subform', async () => {
+  const screen = await render(<Harness />)
+
+  await screen.getByRole('textbox', { name: 'Port' }).fill('80')
+  await userEvent.keyboard('{Enter}')
+  await expect.element(screen.getByText('Subform submits: 1')).toBeVisible()
+  await expect.element(screen.getByText('Form submits: 0')).toBeVisible()
+})
+
+test('Enter on the Add button submits the subform once', async () => {
+  const screen = await render(<Harness />)
+
+  const button = screen.getByRole('button', { name: 'Add' })
+  // focus directly because WebKit doesn't Tab to buttons
+  button.element().focus()
+  await expect.element(button).toHaveFocus()
+  await userEvent.keyboard('{Enter}')
+  await expect.element(screen.getByText('Subform submits: 1')).toBeVisible()
+  await expect.element(screen.getByText('Form submits: 0')).toBeVisible()
+})
+
+test('outside a subform, Enter in a closed combobox submits the form', async () => {
+  const screen = await render(<Harness />)
+
+  await highlightFirstOption(screen, 'Outer disk')
+  await commands.pressComboboxKey('Outer disk', 'Enter')
+  await expect.element(screen.getByText('Outer: disk-3')).toBeVisible()
+  await expect.element(screen.getByText('Form submits: 0')).toBeVisible()
+
+  await commands.pressComboboxKey('Outer disk', 'Enter')
+  await expect.element(screen.getByText('Form submits: 1')).toBeVisible()
+  await expect.element(screen.getByText('Subform submits: 0')).toBeVisible()
+})
diff --git a/app/components/form/Subform.tsx b/app/components/form/Subform.tsx
new file mode 100644
index 0000000000..72d720046c
--- /dev/null
+++ b/app/components/form/Subform.tsx
@@ -0,0 +1,75 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import cn from 'classnames'
+import type { ReactNode } from 'react'
+
+import { Button } from '~/ui/lib/Button'
+import { KEYS } from '~/ui/util/keys'
+
+type SubformProps = {
+  /** Called on Enter in one of the subform's inputs and on the Add button */
+  onSubmit: () => void
+  onClear: () => void
+  addButtonLabel: string
+  /** Disables the Clear and Add buttons */
+  disabled: boolean
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Container for the fields of a subform: a nested `useForm` rendered inside an
+ * outer form, like the firewall rule targets or webhook secrets, followed by
+ * Clear and Add buttons for adding the result to a list. A subform is
+ * not a DOM form, so Enter in one of its inputs would submit the outer form.
+ * This catches the Enter as it bubbles and submits the subform instead, so the
+ * fields themselves don't need any Enter handling.
+ *
+ * A combobox with its options open handles Enter itself (selecting the
+ * highlighted option) and stops propagation, so that Enter never gets here.
+ */
+export function Subform({
+  onSubmit,
+  onClear,
+  addButtonLabel,
+  disabled,
+  className,
+  children,
+}: SubformProps) {
+  return (
+    // The div only listens for Enter bubbling up from the inputs inside it
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={cn('flex flex-col gap-3', className)}
+      onKeyDown={(e) => {
+        if (
+          e.key === KEYS.enter &&
+          // a field already handled this Enter
+          !e.defaultPrevented &&
+          // Enter that commits an IME composition isn't a submit
+          !e.nativeEvent.isComposing &&
+          // buttons (Add, Clear, listbox triggers) handle Enter themselves
+          e.target instanceof HTMLInputElement
+        ) {
+          e.preventDefault() // prevent full form submission
+          onSubmit()
+        }
+      }}
+    >
+      <div className="ox-subform">{children}</div>
+      <div className="flex justify-end gap-2.5">
+        <Button variant="ghost" size="sm" onClick={onClear} disabled={disabled}>
+          Clear
+        </Button>
+        <Button size="sm" onClick={onSubmit} disabled={disabled}>
+          {addButtonLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx
index b597bd786d..5c3524ed0f 100644
--- a/app/forms/firewall-rules-common.tsx
+++ b/app/forms/firewall-rules-common.tsx
@@ -35,6 +35,7 @@ import { NameField, validateName } from '~/components/form/fields/NameField'
 import { NumberField } from '~/components/form/fields/NumberField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField, TextFieldInner } from '~/components/form/fields/TextField'
+import { Subform } from '~/components/form/Subform'
 import { useVpcSelector } from '~/hooks/use-params'
 import {
   ProtocolCell,
@@ -45,10 +46,9 @@ import { toComboboxItems } from '~/ui/lib/Combobox'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
-import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { SideModal } from '~/ui/lib/SideModal'
 import { TextInputHint } from '~/ui/lib/TextInput'
-import { KEYS } from '~/ui/util/keys'
 import { ALL_ISH } from '~/util/consts'
 import { validateIp, validateIpNet } from '~/util/ip'
 import { links } from '~/util/links'
@@ -172,59 +172,53 @@ const TargetAndHostFilterSubform = ({
       <SideModal.Heading>{nounTitle}</SideModal.Heading>
 
       <Message variant="info" content={messageContent} />
-      <ListboxField
-        name="type"
-        label={`${capitalize(sectionType)} type`}
-        control={subformControl}
-        items={targetHostTypeItems}
-        onChange={onTypeChange}
-        hideOptionalTag
-      />
-      {/* In the firewall rules form, a few types get comboboxes instead of text fields */}
-      {valueType === 'vpc' || valueType === 'subnet' || valueType === 'instance' ? (
-        <ComboboxField
-          disabled={subform.formState.isSubmitting}
-          name="value"
-          {...getFilterValueProps(valueType)}
-          description="Select an option or enter a custom value"
+      <Subform
+        onSubmit={submitSubform}
+        onClear={() => subform.reset()}
+        addButtonLabel={`Add ${noun}`}
+        disabled={!value}
+      >
+        <ListboxField
+          name="type"
+          label={`${capitalize(sectionType)} type`}
           control={subformControl}
-          onEnter={submitSubform}
-          items={items}
-          allowArbitraryValues
+          items={targetHostTypeItems}
+          onChange={onTypeChange}
           hideOptionalTag
-          validate={(value) =>
-            // required: false arg is desirable because otherwise if you put in
-            // a bad name and submit, causing it to revalidate onChange, then
-            // clear the field you're left with a BS "Target name is required"
-            // error message
-            validateName(value, `${capitalize(sectionType)} name`, false)
-          }
         />
-      ) : (
-        <TextField
-          name="value"
-          {...getFilterValueProps(valueType)}
-          control={subformControl}
-          disabled={subform.formState.isSubmitting}
-          onKeyDown={(e) => {
-            if (e.key === KEYS.enter) {
-              e.preventDefault() // prevent full form submission
-              submitSubform(e)
+        {/* In the firewall rules form, a few types get comboboxes instead of text fields */}
+        {valueType === 'vpc' || valueType === 'subnet' || valueType === 'instance' ? (
+          <ComboboxField
+            disabled={subform.formState.isSubmitting}
+            name="value"
+            {...getFilterValueProps(valueType)}
+            description="Select an option or enter a custom value"
+            control={subformControl}
+            items={items}
+            allowArbitraryValues
+            hideOptionalTag
+            validate={(value) =>
+              // required: false arg is desirable because otherwise if you put in
+              // a bad name and submit, causing it to revalidate onChange, then
+              // clear the field you're left with a BS "Target name is required"
+              // error message
+              validateName(value, `${capitalize(sectionType)} name`, false)
             }
-          }}
-          validate={(value) =>
-            (valueType === 'ip' && validateIp(value)) ||
-            (valueType === 'ip_net' && validateIpNet(value)) ||
-            undefined
-          }
-        />
-      )}
-      <ClearAndAddButtons
-        addButtonCopy={`Add ${noun}`}
-        disabled={!value}
-        onClear={() => subform.reset()}
-        onSubmit={submitSubform}
-      />
+          />
+        ) : (
+          <TextField
+            name="value"
+            {...getFilterValueProps(valueType)}
+            control={subformControl}
+            disabled={subform.formState.isSubmitting}
+            validate={(value) =>
+              (valueType === 'ip' && validateIp(value)) ||
+              (valueType === 'ip_net' && validateIpNet(value)) ||
+              undefined
+            }
+          />
+        )}
+      </Subform>
       <MiniTable
         className="mb-4"
         ariaLabel={nounTitle}
@@ -465,75 +459,65 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
 
   return (
     <>
-      <div className="space-y-3">
-        <div className="space-y-5">
-          <ListboxField
-            name="protocolType"
-            label="Protocol filters"
-            hideOptionalTag
-            control={protocolForm.control}
-            placeholder=""
-            items={protocolTypeItems}
-            // ICMPv4 and ICMPv6 type numbers mean different things, so clear the
-            // selected ICMP type/code when switching protocol. Also clear errors:
-            // setValue doesn't revalidate, so a stale type error would otherwise
-            // linger on the now-empty field.
-            onChange={() => {
-              protocolForm.setValue('icmpType', '')
-              protocolForm.setValue('icmpCode', '')
-              protocolForm.clearErrors(['icmpType', 'icmpCode'])
-            }}
-          />
+      <Subform
+        onSubmit={submitProtocol}
+        onClear={() => protocolForm.reset()}
+        addButtonLabel="Add protocol filter"
+        disabled={!selectedProtocolType}
+      >
+        <ListboxField
+          name="protocolType"
+          label="Protocol filters"
+          hideOptionalTag
+          control={protocolForm.control}
+          placeholder=""
+          items={protocolTypeItems}
+          // ICMPv4 and ICMPv6 type numbers mean different things, so clear the
+          // selected ICMP type/code when switching protocol. Also clear errors:
+          // setValue doesn't revalidate, so a stale type error would otherwise
+          // linger on the now-empty field.
+          onChange={() => {
+            protocolForm.setValue('icmpType', '')
+            protocolForm.setValue('icmpCode', '')
+            protocolForm.clearErrors(['icmpType', 'icmpCode'])
+          }}
+        />
 
-          {(selectedProtocolType === 'icmp' || selectedProtocolType === 'icmp6') && (
-            <>
-              <ComboboxField
-                label={`${PROTOCOL_LABELS[selectedProtocolType]} type`}
-                name="icmpType"
+        {(selectedProtocolType === 'icmp' || selectedProtocolType === 'icmp6') && (
+          <>
+            <ComboboxField
+              label={`${PROTOCOL_LABELS[selectedProtocolType]} type`}
+              name="icmpType"
+              control={protocolForm.control}
+              description="Leave blank to match any type"
+              placeholder=""
+              allowArbitraryValues
+              items={icmpTypeItems[selectedProtocolType]}
+              validate={(value) => {
+                const result = parseIcmpType(value)
+                if (!result.success) return result.message
+              }}
+            />
+
+            {selectedIcmpType !== undefined && selectedIcmpType !== '' && (
+              <TextField
+                label={`${PROTOCOL_LABELS[selectedProtocolType]} code`}
+                name="icmpCode"
                 control={protocolForm.control}
-                description="Leave blank to match any type"
+                description={
+                  <>
+                    Enter a code (0) or range (e.g., 1&ndash;3). Leave blank for all traffic
+                    of type {selectedIcmpType}.
+                  </>
+                }
                 placeholder=""
-                allowArbitraryValues
-                items={icmpTypeItems[selectedProtocolType]}
-                validate={(value) => {
-                  const result = parseIcmpType(value)
-                  if (!result.success) return result.message
-                }}
+                validate={icmpCodeValidation}
+                transform={normalizeDashes}
               />
-
-              {selectedIcmpType !== undefined && selectedIcmpType !== '' && (
-                <TextField
-                  label={`${PROTOCOL_LABELS[selectedProtocolType]} code`}
-                  name="icmpCode"
-                  control={protocolForm.control}
-                  description={
-                    <>
-                      Enter a code (0) or range (e.g., 1&ndash;3). Leave blank for all
-                      traffic of type {selectedIcmpType}.
-                    </>
-                  }
-                  placeholder=""
-                  validate={icmpCodeValidation}
-                  transform={normalizeDashes}
-                  onKeyDown={(e) => {
-                    if (e.key === KEYS.enter) {
-                      e.preventDefault() // prevent full form submission
-                      submitProtocol(e)
-                    }
-                  }}
-                />
-              )}
-            </>
-          )}
-        </div>
-
-        <ClearAndAddButtons
-          addButtonCopy="Add protocol filter"
-          disabled={!selectedProtocolType}
-          onClear={() => protocolForm.reset()}
-          onSubmit={submitProtocol}
-        />
-      </div>
+            )}
+          </>
+        )}
+      </Subform>
 
       {protocols.value.length > 0 && (
         <MiniTable
@@ -677,7 +661,12 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
         }
       />
 
-      <div className="flex flex-col gap-3">
+      <Subform
+        onSubmit={submitPortRange}
+        onClear={() => portRangeForm.reset()}
+        addButtonLabel="Add port filter"
+        disabled={!portValue}
+      >
         {/* We have to blow this up instead of using TextField to get better
             text styling on the label */}
         <div className="mt-2">
@@ -692,25 +681,13 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
             name="portRange"
             required
             control={portRangeForm.control}
-            onKeyDown={(e) => {
-              if (e.key === KEYS.enter) {
-                e.preventDefault() // prevent full form submission
-                submitPortRange(e)
-              }
-            }}
             validate={(value) => {
               if (!parsePortRange(value)) return 'Not a valid port range'
               if (ports.value.includes(value.trim())) return 'Port range already added'
             }}
           />
         </div>
-        <ClearAndAddButtons
-          addButtonCopy="Add port filter"
-          disabled={!portValue}
-          onClear={() => portRangeForm.reset()}
-          onSubmit={submitPortRange}
-        />
-      </div>
+      </Subform>
       {ports.value.length > 0 && (
         <MiniTable
           className="mb-4"
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index b90e7c503d..5c962393cb 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -22,6 +22,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextFieldInner } from '~/components/form/fields/TextField'
 import { FormMetadata } from '~/components/form/FormMetadata'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { Subform } from '~/components/form/Subform'
 import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
@@ -30,11 +31,10 @@ import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
-import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { HintLink, TextInputHint } from '~/ui/lib/TextInput'
-import { KEYS } from '~/ui/util/keys'
 import { parseIpNet, validateIpNet } from '~/util/ip'
 import { docLinks, links } from '~/util/links'
 
@@ -143,8 +143,13 @@ export function EditNetworkInterfaceForm({
       <DescriptionField name="description" control={form.control} />
       <FormDivider />
 
-      <div className="flex flex-col gap-3">
-        {/* We have to blow this up instead of using TextField for better layout control of field and ClearAndAddButtons */}
+      <Subform
+        onSubmit={submitTransitIp}
+        onClear={() => transitIpsForm.reset()}
+        addButtonLabel="Add Transit IP"
+        disabled={!transitIpValue}
+      >
+        {/* We have to blow this up instead of using TextField for better layout control of field and Clear/Add buttons */}
         <div>
           <FieldLabel id="transitIp-label" htmlFor="transitIp" optional>
             Transit IPs
@@ -157,12 +162,6 @@ export function EditNetworkInterfaceForm({
             id="transitIp"
             name="transitIp"
             control={transitIpsForm.control}
-            onKeyDown={(e) => {
-              if (e.key === KEYS.enter) {
-                e.preventDefault() // prevent full form submission
-                submitTransitIp()
-              }
-            }}
             validate={(value) => {
               const error = validateIpNet(value)
               if (error) return error
@@ -181,13 +180,7 @@ export function EditNetworkInterfaceForm({
             placeholder={`An IP network, e.g., ${exampleIPs}`}
           />
         </div>
-        <ClearAndAddButtons
-          addButtonCopy="Add Transit IP"
-          disabled={!transitIpValue}
-          onClear={() => transitIpsForm.reset()}
-          onSubmit={submitTransitIp}
-        />
-      </div>
+      </Subform>
       <MiniTable
         className="mb-4"
         ariaLabel="Transit IPs"
diff --git a/app/forms/webhook-create.tsx b/app/forms/webhook-create.tsx
index 832c2ee795..fcceadcdd3 100644
--- a/app/forms/webhook-create.tsx
+++ b/app/forms/webhook-create.tsx
@@ -18,14 +18,14 @@ import { SubscriptionsField } from '~/components/form/fields/SubscriptionsField'
 import { TextField } from '~/components/form/fields/TextField'
 import { Form } from '~/components/form/Form'
 import { FullPageForm } from '~/components/form/FullPageForm'
+import { Subform } from '~/components/form/Subform'
 import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { Message } from '~/ui/lib/Message'
-import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { HintLink } from '~/ui/lib/TextInput'
-import { KEYS } from '~/ui/util/keys'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
@@ -74,7 +74,13 @@ function SecretsField({ control }: { control: Control<WebhookCreateFormValues> }
 
   return (
     <>
-      <div className="flex max-w-lg flex-col gap-3">
+      <Subform
+        onSubmit={submitSubform}
+        onClear={() => subform.reset()}
+        addButtonLabel="Add secret"
+        disabled={!secret}
+        className="max-w-lg"
+      >
         <TextField
           control={subform.control}
           name="secret"
@@ -86,20 +92,8 @@ function SecretsField({ control }: { control: Control<WebhookCreateFormValues> }
             </>
           }
           required
-          onKeyDown={(e) => {
-            if (e.key === KEYS.enter) {
-              e.preventDefault() // prevent full form submission
-              submitSubform(e)
-            }
-          }}
-        />
-        <ClearAndAddButtons
-          addButtonCopy="Add secret"
-          disabled={!secret}
-          onClear={() => subform.reset()}
-          onSubmit={submitSubform}
         />
-      </div>
+      </Subform>
       <MiniTable
         className="max-w-lg"
         ariaLabel="Secrets"
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index d03368a313..b867d2de8a 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -15,7 +15,7 @@ import {
 } from '@headlessui/react'
 import cn from 'classnames'
 import { matchSorter } from 'match-sorter'
-import { useEffect, useId, useRef, useState, type ReactNode, type Ref } from 'react'
+import { useEffect, useId, useState, type ReactNode, type Ref } from 'react'
 
 import { SelectArrows6Icon } from '@oxide/design-system/icons/react'
 
@@ -73,8 +73,6 @@ export type ComboboxBaseProps = {
    * For example, if a form value should be set when the user types, use `onInputChange`.
    */
   onInputChange?: (value: string) => void
-  /** Fires whenever the Enter key is pressed while Combobox input has focus */
-  onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void
   /**
    * Optional function to transform the value entered into the input as the user types.
    */
@@ -101,7 +99,6 @@ export const Combobox = ({
   disabled,
   isLoading,
   onChange,
-  onEnter,
   onInputChange,
   allowArbitraryValues = false,
   renderArbitraryLabel,
@@ -180,17 +177,6 @@ export const Combobox = ({
 
   const zIndex = usePopoverZIndex()
   const id = useId()
-  // Tracks whether the dropdown is open so the onKeyDown handler can
-  // distinguish Enter-to-select (dropdown open, let HUI handle it) from
-  // Enter-to-submit (dropdown closed, fire onEnter). We use a ref instead
-  // of HUI's `open` render prop because our handler runs before HUI's
-  // (useRender merges user props first) and the render prop can be stale.
-  // The ref stays current because onClose sets it synchronously during
-  // HUI's own keydown handler. With the stale render prop, the handler
-  // could see the combobox as closed one keydown too late, firing onEnter
-  // instead of letting HUI select — hard to notice manually but caused
-  // consistent e2e flakes in Firefox.
-  const isOpenRef = useRef(false)
   return (
     <HCombobox
       // items are re-created each render, so compare by value field
@@ -202,7 +188,6 @@ export const Combobox = ({
         onChange(item?.value ?? '')
       }}
       onClose={() => {
-        isOpenRef.current = false
         // A window or tab switch also closes the combobox. Keep the active query
         // in that case so it is still visible when the user returns.
         if (!document.hasFocus()) return
@@ -213,143 +198,126 @@ export const Combobox = ({
       immediate
       virtual={{ options: virtualOptions, disabled: isNoMatch }}
     >
-      {({ open }) => {
-        // Sync open state to ref on render (handles the opening side)
-        if (open) isOpenRef.current = true
-        return (
-          <div>
-            {label && (
-              // TODO: FieldLabel needs a real ID
-              <div className="mb-2">
-                <FieldLabel
-                  id={`${id}-label`}
-                  htmlFor={`${id}-input`}
-                  optional={!required && !hideOptionalTag}
-                >
-                  {label}
-                </FieldLabel>
-                {description && (
-                  <TextInputHint id={`${id}-help-text`}>{description}</TextInputHint>
-                )}
-              </div>
+      <div>
+        {label && (
+          // TODO: FieldLabel needs a real ID
+          <div className="mb-2">
+            <FieldLabel
+              id={`${id}-label`}
+              htmlFor={`${id}-input`}
+              optional={!required && !hideOptionalTag}
+            >
+              {label}
+            </FieldLabel>
+            {description && (
+              <TextInputHint id={`${id}-help-text`}>{description}</TextInputHint>
             )}
-            <div
+          </div>
+        )}
+        <div
+          className={cn(
+            `bg-default flex rounded-md border focus-within:ring-2`,
+            hasError
+              ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
+              : 'border-default focus-within:ring-accent-secondary hover:border-raise',
+            disabled
+              ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
+              : 'bg-default',
+            disabled && hasError && 'border-error-secondary!'
+          )}
+          // Putting the inputRef on the div makes it so the div can be focused by RHF when there's an error.
+          // We want to focus on the div (rather than the input) so the combobox doesn't open automatically
+          // and obscure the error message.
+          ref={inputRef}
+          // tabIndex=-1 is necessary to make the div focusable
+          tabIndex={-1}
+        >
+          <ComboboxInput
+            id={`${id}-input`}
+            // While the user is editing, show the query so they can see what they
+            // typed. Otherwise, show the selected item's display value (or the query
+            // if nothing is selected yet). On blur the dropdown closes, isEditing
+            // flips to false, and the input reverts to the selection — preserving it.
+            // We use `value` instead of HUI's `displayValue` so the input value can
+            // be normalized via the onChange event.
+            value={
+              isEditing
+                ? query
+                : selectedItemValue
+                  ? allowArbitraryValues
+                    ? selectedItemValue
+                    : (selectedItem?.selectedLabel ?? '')
+                  : query
+            }
+            onChange={(event) => {
+              const value = transform ? transform(event.target.value) : event.target.value
+              setIsEditing(true)
+              setQuery(value)
+              onInputChange?.(value)
+            }}
+            placeholder={placeholder}
+            disabled={disabled || isLoading}
+            className={cn(
+              `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded-md border-none! px-3 py-2 outline-hidden!`,
+              disabled
+                ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
+                : 'bg-default',
+              hasError && 'focus-error'
+            )}
+          />
+          {items.length > 0 && (
+            <ComboboxButton
               className={cn(
-                `bg-default flex rounded-md border focus-within:ring-2`,
-                hasError
-                  ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
-                  : 'border-default focus-within:ring-accent-secondary hover:border-raise',
-                disabled
-                  ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
-                  : 'bg-default',
-                disabled && hasError && 'border-error-secondary!'
+                'relative flex items-center px-3 before:absolute before:inset-y-1.5 before:left-0 before:w-px before:content-[""] before:bg-(--stroke-secondary)',
+                disabled ? 'bg-disabled cursor-not-allowed' : 'bg-default'
               )}
-              // Putting the inputRef on the div makes it so the div can be focused by RHF when there's an error.
-              // We want to focus on the div (rather than the input) so the combobox doesn't open automatically
-              // and obscure the error message.
-              ref={inputRef}
-              // tabIndex=-1 is necessary to make the div focusable
-              tabIndex={-1}
+              aria-hidden
             >
-              <ComboboxInput
-                id={`${id}-input`}
-                // While the user is editing, show the query so they can see what they
-                // typed. Otherwise, show the selected item's display value (or the query
-                // if nothing is selected yet). On blur the dropdown closes, isEditing
-                // flips to false, and the input reverts to the selection — preserving it.
-                // We use `value` instead of HUI's `displayValue` so the input value can
-                // be normalized via the onChange event.
-                value={
-                  isEditing
-                    ? query
-                    : selectedItemValue
-                      ? allowArbitraryValues
-                        ? selectedItemValue
-                        : (selectedItem?.selectedLabel ?? '')
-                      : query
-                }
-                onChange={(event) => {
-                  const value = transform
-                    ? transform(event.target.value)
-                    : event.target.value
-                  setIsEditing(true)
-                  setQuery(value)
-                  onInputChange?.(value)
-                }}
-                onKeyDown={(e) => {
-                  // When the dropdown is open, Enter should select the
-                  // highlighted option (HUI handles this). When closed,
-                  // Enter should submit the subform via onEnter.
-                  if (e.key === 'Enter' && !isOpenRef.current) {
-                    e.preventDefault()
-                    onEnter?.(e)
-                  }
-                }}
-                placeholder={placeholder}
-                disabled={disabled || isLoading}
-                className={cn(
-                  `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded-md border-none! px-3 py-2 outline-hidden!`,
-                  disabled
-                    ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
-                    : 'bg-default',
-                  hasError && 'focus-error'
-                )}
-              />
-              {items.length > 0 && (
-                <ComboboxButton
-                  className={cn(
-                    'relative flex items-center px-3 before:absolute before:inset-y-1.5 before:left-0 before:w-px before:content-[""] before:bg-(--stroke-secondary)',
-                    disabled ? 'bg-disabled cursor-not-allowed' : 'bg-default'
-                  )}
-                  aria-hidden
+              <SelectArrows6Icon title="Select" className="text-secondary w-2" />
+            </ComboboxButton>
+          )}
+        </div>
+        {(items.length > 0 || allowArbitraryValues) && virtualOptions.length > 0 && (
+          <ComboboxOptions
+            anchor="bottom start"
+            // 13px gap is presumably because it's measured from inside the outline or something
+            className={`ox-menu shadow-menu-inset pointer-events-auto ${zIndex} border-secondary relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border [--anchor-gap:13px]`}
+            style={{ minHeight }}
+            modal={false}
+          >
+            {({ option }: { option: ComboboxItem }) => {
+              const noMatch = option === NO_MATCH_ITEM
+              return (
+                <ComboboxOption
+                  value={option}
+                  disabled={noMatch}
+                  className="border-secondary relative w-full border-b last:border-0"
                 >
-                  <SelectArrows6Icon title="Select" className="text-secondary w-2" />
-                </ComboboxButton>
-              )}
-            </div>
-            {(items.length > 0 || allowArbitraryValues) && virtualOptions.length > 0 && (
-              <ComboboxOptions
-                anchor="bottom start"
-                // 13px gap is presumably because it's measured from inside the outline or something
-                className={`ox-menu shadow-menu-inset pointer-events-auto ${zIndex} border-secondary relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border [--anchor-gap:13px]`}
-                style={{ minHeight }}
-                modal={false}
-              >
-                {({ option }: { option: ComboboxItem }) => {
-                  const noMatch = option === NO_MATCH_ITEM
-                  return (
-                    <ComboboxOption
-                      value={option}
-                      disabled={noMatch}
-                      className="border-secondary relative w-full border-b last:border-0"
+                  {({ focus, selected }) => (
+                    // This *could* be done with data-[focus] and data-[selected] instead, but
+                    // it would be a lot more verbose. those can only be used with TW classes,
+                    // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
+                    // of those rules one by one. Better to rely on the shared classes.
+                    <div
+                      className={cn('ox-menu-item', {
+                        // suppress when the user is actively typing the selected
+                        // value (e.g. the synthesized "Custom: <query>" row in
+                        // arbitrary-values mode) so the row doesn't read as
+                        // committed mid-keystroke
+                        'is-selected': selected && query !== option.value && !noMatch,
+                        'is-highlighted': focus && !noMatch,
+                        'text-disabled!': noMatch,
+                      })}
                     >
-                      {({ focus, selected }) => (
-                        // This *could* be done with data-[focus] and data-[selected] instead, but
-                        // it would be a lot more verbose. those can only be used with TW classes,
-                        // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
-                        // of those rules one by one. Better to rely on the shared classes.
-                        <div
-                          className={cn('ox-menu-item', {
-                            // suppress when the user is actively typing the selected
-                            // value (e.g. the synthesized "Custom: <query>" row in
-                            // arbitrary-values mode) so the row doesn't read as
-                            // committed mid-keystroke
-                            'is-selected': selected && query !== option.value && !noMatch,
-                            'is-highlighted': focus && !noMatch,
-                            'text-disabled!': noMatch,
-                          })}
-                        >
-                          {option.label}
-                        </div>
-                      )}
-                    </ComboboxOption>
-                  )
-                }}
-              </ComboboxOptions>
-            )}
-          </div>
-        )
-      }}
+                      {option.label}
+                    </div>
+                  )}
+                </ComboboxOption>
+              )
+            }}
+          </ComboboxOptions>
+        )}
+      </div>
     </HCombobox>
   )
 }
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 9e3d5aff73..1b2597333f 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -12,7 +12,6 @@ import { Error16Icon } from '@oxide/design-system/icons/react'
 
 import { roleDiv } from '~/util/classed'
 
-import { Button } from './Button'
 import { EmptyMessage } from './EmptyMessage'
 import { Tooltip } from './Tooltip'
 
@@ -104,33 +103,6 @@ const RemoveCell = ({ onClick, label }: { onClick: () => void; label: string })
   </RemoveCellWrapper>
 )
 
-type ClearAndAddButtonsProps = {
-  addButtonCopy: string
-  disabled: boolean
-  onClear: () => void
-  onSubmit: () => void
-}
-
-/**
- * A set of buttons used with embedded sub-forms to add items to MiniTables,
- * like in the firewall rules and NIC edit forms.
- */
-export const ClearAndAddButtons = ({
-  addButtonCopy,
-  disabled,
-  onClear,
-  onSubmit,
-}: ClearAndAddButtonsProps) => (
-  <div className="flex justify-end gap-2.5">
-    <Button variant="ghost" size="sm" onClick={onClear} disabled={disabled}>
-      Clear
-    </Button>
-    <Button size="sm" onClick={onSubmit} disabled={disabled}>
-      {addButtonCopy}
-    </Button>
-  </div>
-)
-
 type Column<T> = {
   header: string
 } & (
diff --git a/app/ui/styles/components/form.css b/app/ui/styles/components/form.css
index 82d35e8474..516d414005 100644
--- a/app/ui/styles/components/form.css
+++ b/app/ui/styles/components/form.css
@@ -18,7 +18,8 @@
 
 .ox-form,
 .ox-form .ox-tabs-panel,
-.ox-form .ox-accordion-content {
+.ox-form .ox-accordion-content,
+.ox-form .ox-subform {
   @apply space-y-6;
 }
 
diff --git a/test/e2e/alerts.e2e.ts b/test/e2e/alerts.e2e.ts
index 4f0f5b366a..40b12a827c 100644
--- a/test/e2e/alerts.e2e.ts
+++ b/test/e2e/alerts.e2e.ts
@@ -95,9 +95,10 @@ test('Webhook receiver create', async ({ page }) => {
   await expect(main.getByText('Must be at most 512 characters')).toBeVisible()
   await page.getByRole('textbox', { name: 'Endpoint URL' }).fill('https://ci.example.com')
 
-  // add a secret; it lands in the mini table
-  await page.getByRole('textbox', { name: 'Secret' }).fill('super-secret')
-  await page.getByRole('button', { name: 'Add secret' }).click()
+  // add a secret with Enter; it lands in the mini table without submitting
+  const secretInput = page.getByRole('textbox', { name: 'Secret' })
+  await secretInput.fill('super-secret')
+  await secretInput.press('Enter')
   await expect(
     page
       .getByRole('table', { name: 'Secrets' })
@@ -667,13 +668,14 @@ const alertListFilteringBasics = async (page: Page) => {
 }
 
 test('Alert list filtering by class', async ({ page }) => {
-  const { table, filterButton, input, applyButton } = await alertListFilteringBasics(page)
+  const { table, filterButton, input } = await alertListFilteringBasics(page)
 
   // typed glob previews how many classes it matches
   await filterButton.click()
   await input.fill('**.remove')
   await page.getByRole('option', { name: /Matches 3 alert classes/ }).click()
-  await applyButton.click()
+  // Enter in the closed combobox applies the filter
+  await input.press('Enter')
 
   // filter is applied and reflected in the URL
   await expect(page).toHaveURL(/subscription=\*\*\.remove/)
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index 5d72437638..8777c00a75 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -639,3 +639,38 @@ test('can add ICMPv4 and ICMPv6 protocol filters', async ({ page }) => {
   await page.getByRole('option', { name: 'ICMPv4', exact: true }).click()
   await expect(page.getByRole('combobox', { name: 'ICMPv4 type' })).toHaveValue('')
 })
+
+test('Enter in subform fields adds items without submitting the rule', async ({ page }) => {
+  await page.goto('/projects/mock-project/vpcs/default/firewall-rules-new')
+  // with a valid name, an accidental full form submit would close the form
+  await page.getByRole('textbox', { name: 'Name' }).fill('enter-test')
+
+  // first Enter selects the custom value, second adds it
+  const vpcInput = page.getByRole('combobox', { name: 'VPC name' }).first()
+  await vpcInput.fill('abc')
+  await vpcInput.press('Enter')
+  await expect(vpcInput).toHaveValue('abc')
+  await vpcInput.press('Enter')
+  await expectRowVisible(page.getByRole('table', { name: 'Targets' }), {
+    Type: 'vpc',
+    Value: 'abc',
+  })
+
+  const portInput = page.getByRole('textbox', { name: 'Port filters' })
+  await portInput.fill('22')
+  await portInput.press('Enter')
+  await expectRowVisible(page.getByRole('table', { name: 'Port filters' }), {
+    'Port ranges': '22',
+  })
+
+  await selectOption(page, 'Protocol filters', 'ICMPv4')
+  const v4Type = page.getByRole('combobox', { name: 'ICMPv4 type' })
+  await fillAndSelectComboboxOption(v4Type, page, '8', '8 - Echo Request')
+  await v4Type.press('Enter')
+  await expectRowVisible(page.getByRole('table', { name: 'Protocol filters' }), {
+    Protocol: 'ICMPv4',
+    Type: '8',
+  })
+
+  await expect(page.getByRole('dialog', { name: 'Add firewall rule' })).toBeVisible()
+})
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 86b47ceca1..822234c96a 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -1374,3 +1374,13 @@ test('can create instance with read-only boot disk', async ({ page }) => {
   const bootDiskTable = page.getByRole('table', { name: 'Boot disk' })
   await expect(bootDiskTable.getByText('read only')).toBeVisible()
 })
+
+test('Enter in the boot disk image picker creates the instance', async ({ page }) => {
+  await page.goto('/projects/mock-project/instances-new')
+  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('enter-instance')
+  await selectAProjectImage(page, 'image-3')
+
+  // the picker closes on selection, so Enter submits the whole form
+  await page.getByPlaceholder('Select a project image', { exact: true }).press('Enter')
+  await expect(page).toHaveURL('/projects/mock-project/instances/enter-instance/storage')
+})
diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
index 1f3f0d608f..6c42d4e2c0 100644
--- a/test/e2e/instance-disks.e2e.ts
+++ b/test/e2e/instance-disks.e2e.ts
@@ -117,8 +117,10 @@ test('Attach disk', async ({ page }) => {
   await expectVisible(page, ['role=option[name="disk-3"]', 'role=option[name="disk-4"]'])
   await page.click('role=option[name="disk-3"]')
 
-  await page.click('role=button[name="Attach disk"]')
-  await expectVisible(page, ['role=cell[name="disk-3"]'])
+  // Enter in the closed combobox submits the form
+  await page.getByRole('combobox', { name: 'Disk name' }).press('Enter')
+  await expect(page.getByRole('dialog', { name: 'Attach disk' })).toBeHidden()
+  await expect(page.getByRole('cell', { name: 'disk-3' })).toBeVisible()
 })
 
 test('Create disk', async ({ page }) => {
diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts
index dd3c149993..d6fb1dd559 100644
--- a/test/e2e/instance-networking.e2e.ts
+++ b/test/e2e/instance-networking.e2e.ts
@@ -376,8 +376,8 @@ test('Edit network interface - Transit IPs', async ({ page }) => {
   await transitIpField.fill('192.168.0.0/16')
   await expect(errorMessage).toBeHidden()
 
-  // Submit and assert it's in the table
-  await addTransitIpButton.click()
+  // Enter adds it to the table without submitting the outer form
+  await transitIpField.press('Enter')
   await expect(transitIpField).toHaveValue('')
   await expectRowVisible(transitIpsTable, { 'Transit IPs': '192.168.0.0/16' })
 
@@ -389,17 +389,24 @@ test('Edit network interface - Transit IPs', async ({ page }) => {
   await addTransitIpButton.click()
   await expect(dupeError).toBeVisible()
 
+  // the Add button works too
+  await transitIpField.fill('10.0.0.0/8')
+  await addTransitIpButton.click()
+  await expect(transitIpField).toHaveValue('')
+  await expectRowVisible(transitIpsTable, { 'Transit IPs': '10.0.0.0/8' })
+
   // Submit the form
   await modal.getByRole('button', { name: 'Update network interface' }).click()
 
   // Assert the transit IP is in the NICs table
-  // The NIC now has 3 transit IPs: 172.30.0.0/22 (v4), 192.168.0.0/16 (v4), and ::/64 (v6)
+  // The NIC now has 4 transit IPs: 172.30.0.0/22 (v4), 192.168.0.0/16 (v4),
+  // 10.0.0.0/8 (v4), and ::/64 (v6)
   const nicTable = page.getByRole('table', { name: 'Network interfaces' })
-  await expectRowVisible(nicTable, { 'Transit IPs': '172.30.0.0/22+2' })
+  await expectRowVisible(nicTable, { 'Transit IPs': '172.30.0.0/22+3' })
 
-  await page.getByText('+2').hover()
+  await page.getByText('+3').hover()
   await expect(
-    page.getByRole('tooltip', { name: 'Other transit IPs 192.168.0.0/16 ::/64' })
+    page.getByRole('tooltip', { name: 'Other transit IPs 192.168.0.0/16 10.0.0.0/8 ::/64' })
   ).toBeVisible()
 })