diff --git a/app/components/form/fields/useItemsList.ts b/app/components/form/fields/useItemsList.ts
index d5ea5f70ce..5370b0d276 100644
--- a/app/components/form/fields/useItemsList.ts
+++ b/app/components/form/fields/useItemsList.ts
@@ -11,16 +11,23 @@ import { useMemo } from 'react'
 import { useApiQuery } from '~/api'
 import { useVpcSelector } from '~/hooks'
 
+/**
+ * Special value indicating no router. Must convert `undefined` to this when
+ * populating form, and must convert this to `undefined` in onSubmit.
+ */
+export const NO_ROUTER = '||no router||'
+
 export const useCustomRouterItems = () => {
   const vpcSelector = useVpcSelector()
-  const routers = useApiQuery('vpcRouterList', { query: { ...vpcSelector } })
+  const { data, isLoading } = useApiQuery('vpcRouterList', { query: { ...vpcSelector } })
+
   const routerItems = useMemo(() => {
-    return (
-      routers?.data?.items
-        .filter((item) => item.kind === 'custom')
-        .map((router) => ({ value: router.id, label: router.name })) || []
-    )
-  }, [routers])
+    const items = (data?.items || [])
+      .filter((item) => item.kind === 'custom')
+      .map((router) => ({ value: router.id, label: router.name }))
+
+    return [{ value: NO_ROUTER, label: 'None' }, ...items]
+  }, [data])
 
-  return { isLoading: routers.isLoading, items: routerItems }
+  return { isLoading, items: routerItems }
 }
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index 6bc5d29331..c58dc6e747 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -13,7 +13,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
-import { useCustomRouterItems } from '~/components/form/fields/useItemsList'
+import { NO_ROUTER, useCustomRouterItems } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useVpcSelector } from '~/hooks'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -21,7 +21,7 @@ import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcSubnetCreate = {
   name: '',
-  customRouter: undefined,
+  customRouter: NO_ROUTER,
   description: '',
   ipv4Block: '',
 }
@@ -49,7 +49,15 @@ export function CreateSubnetForm() {
       formType="create"
       resourceName="subnet"
       onDismiss={onDismiss}
-      onSubmit={(body) => createSubnet.mutate({ query: vpcSelector, body })}
+      onSubmit={(body) =>
+        createSubnet.mutate({
+          query: vpcSelector,
+          body: {
+            ...body,
+            customRouter: body.customRouter === NO_ROUTER ? undefined : body.customRouter,
+          },
+        })
+      }
       loading={createSubnet.isPending}
       submitError={createSubnet.error}
     >
@@ -63,6 +71,7 @@ export function CreateSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
+        required
       />
       <FormDivider />
       <TextField name="ipv4Block" label="IPv4 block" required control={form.control} />
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index ab6b706a50..2f515cca72 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -18,7 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
-import { useCustomRouterItems } from '~/components/form/fields/useItemsList'
+import { NO_ROUTER, useCustomRouterItems } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getVpcSubnetSelector, useForm, useVpcSubnetSelector } from '~/hooks'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -55,17 +55,11 @@ export function EditSubnetForm() {
   const defaultValues: VpcSubnetUpdate = {
     name: subnet.name,
     description: subnet.description,
-    customRouter: subnet.customRouterId,
+    customRouter: subnet.customRouterId || NO_ROUTER,
   }
 
   const form = useForm({ defaultValues })
   const { isLoading, items } = useCustomRouterItems()
-  const customRouterValue = form.watch('customRouter')
-  const clearCustomRouter = () => {
-    // Because this is `undefined`, the dropdown isn't behaving correctly; it should revert to the placeholder
-    // It works when the value is '', but that's not a valid value for this field and it trips zod's validator
-    form.setValue('customRouter', undefined)
-  }
 
   return (
     <SideModalForm
@@ -80,7 +74,7 @@ export function EditSubnetForm() {
           body: {
             name: body.name,
             description: body.description,
-            customRouter: body.customRouter,
+            customRouter: body.customRouter === NO_ROUTER ? undefined : body.customRouter,
           },
         })
       }}
@@ -97,8 +91,7 @@ export function EditSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
-        isClearable={!!customRouterValue}
-        onClear={clearCustomRouter}
+        required
       />
     </SideModalForm>
   )