Update instance-create to handle both v4 and v6 ephemeral IP options

[charliepark]

Instances can now have both IPv4- and IPv6-backed ephemeral IPs. This updates the instance create flow to account for that.

It checks / unchecks the ephemeral IP box for the IP version(s) specified in the Network Interfaces section of the form.

Default NICs

Custom NICs

No NIC

Closes #3041

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Feb 14, 2026 3:36am

[david-crespo]

At first I thought maybe we can do without the label, but we do need to indicate somehow what the pool is.

What if we put it in the label? Like Allocate IPv6 address from pool:

Claude was smart and figured out that the "from pool" should be conditional:

The diff is really small, it's like 90% about plumbing through aria-label to make sure we still have a label on the field for screenreaders.

Diff to produce the above

```diff diff --git a/app/components/form/fields/IpPoolSelector.tsx b/app/components/form/fields/IpPoolSelector.tsx index e40b696b22..67893f53f4 100644 --- a/app/components/form/fields/IpPoolSelector.tsx +++ b/app/components/form/fields/IpPoolSelector.tsx @@ -56,6 +56,7 @@ required?: boolean hideOptionalTag?: boolean label?: string + 'aria-label'?: string }

export function IpPoolSelector<
@@ -71,6 +72,7 @@
required = true,
hideOptionalTag = false,
label = 'Pool',

• 'aria-label': ariaLabel,
  }: IpPoolSelectorProps<TFieldValues, TName>) {
  // Note: pools are already filtered by poolType before being passed to this component
  const sortedPools = useMemo(() => {
  @@ -89,6 +91,7 @@
  name={poolFieldName}
  items={sortedPools.map(toIpPoolItem)}
  label={label}

•    aria-label={ariaLabel}
     noItemsPlaceholder="No pools available"
     control={control}
     placeholder="Select a pool"
  

diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx
index 445c8e810c..d93b6488f9 100644
--- a/app/components/form/fields/ListboxField.tsx
+++ b/app/components/form/fields/ListboxField.tsx
@@ -26,6 +26,8 @@
placeholder?: string
className?: string
label?: string

• /** Accessible label for the button when no visible label is rendered */
• 'aria-label'?: string
  required?: boolean
  description?: string | React.ReactNode
  control: Control
  @@ -54,6 +56,7 @@
  isLoading,
  noItemsPlaceholder,
  hideOptionalTag,
• 'aria-label': ariaLabel,
  }: ListboxFieldProps<TFieldValues, TName>) {
  // TODO: recreate this logic
  // validate: (v) => (required && !v ? ${name} is required : undefined),
  @@ -63,6 +66,7 @@
  <Listbox
  description={description}
  label={label}

•    aria-label={ariaLabel}
     required={required}
     placeholder={placeholder}
     noItemsPlaceholder={noItemsPlaceholder}
  

diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 4b1e9b923c..c2b2f72701 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -1000,12 +1000,13 @@
name={checkboxName}
disabled={!canAttach || isSubmitting}
>

•          Allocate and attach an ephemeral {displayVersion} address
  

•          Allocate {displayVersion} address
  

•          {checked && ' from pool:'}
         </CheckboxField>
       </span>
     </Wrap>
     {checked && (
  

•      <div className="ml-6">
  

•      <div className="my-2 ml-6">
         <IpPoolSelector
           control={control}
           poolFieldName={poolFieldName}
  

@@ -1013,7 +1014,8 @@
disabled={isSubmitting}
required={false}
hideOptionalTag

•          label={`${displayVersion} pool`}
  

•          label=""
  

•          aria-label={`${displayVersion} pool`}
         />
       </div>
     )}
  

diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index 0691124bf6..8bf631ff67 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -37,6 +37,8 @@
hasError?: boolean
name?: string
label?: React.ReactNode

• /** Accessible label for the button when no visible label is rendered */
• 'aria-label'?: string
  description?: React.ReactNode
  required?: boolean
  isLoading?: boolean
  @@ -63,6 +65,7 @@
  buttonRef,
  hideOptionalTag,
  hideSelected = false,
• 'aria-label': ariaLabel,
  ...props
  }: ListboxProps) => {
  const selectedItem = selected && items.find((i) => i.value === selected)
  @@ -114,6 +117,7 @@
  hideSelected ? 'w-auto' : 'w-full'
  )}
  ref={buttonRef}

•          aria-label={ariaLabel}
           {...props}
         >
           {!hideSelected && (
  

</details>

[david-crespo]

Type guard shouldn't be necessary as far as I know — is it?

[charliepark]

The flow to end up in a state where it's actually useful is pretty rare …

1. User selects "ip-1" from modal → added to attachedFloatingIps (form state)
2. React Query refetches floatingIpList (on window focus, reconnect, or stale time expiry)
3. "ip-1" is now attached to another instance or deleted (via some other user on the system)
4. "ip-1" filtered out of attachableFloatingIps
5. Form state still has "ip-1", but .find() can't find it

But TS complains* unless it has either a filter (.filter((ip) => ip !== undefined) or .filter((ip) => !!ip)), or an ! assertion (floatingIp) => attachableFloatingIps.find((fip) => fip.name === floatingIp)!

• The complaint is in the MiniTable, where an item might be undefined.

I'm moving to an assertion as that should throw an error if the user ends up in that state, versus having the Floating IP silently disappear, but I'm open to filtering if that feels like a better situation.