diff --git a/packages/builder/src/components/portal/environment/EnvVariableInput.svelte b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
new file mode 100644
index 0000000000..24ffaf19bd
--- /dev/null
+++ b/packages/builder/src/components/portal/environment/EnvVariableInput.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {
+    EnvDropdown,
+    Modal,
+    notifications,
+    type EnvDropdownType,
+  } from "@budibase/bbui"
+  import { environment, licensing } from "@/stores/portal"
+  import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
+  import type { CreateEnvironmentVariableRequest } from "@budibase/types"
+
+  export let type: EnvDropdownType
+  export let value: string | undefined = undefined
+  export let error: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+
+  let modal: Modal
+
+  async function handleUpgradePanel() {
+    await environment.upgradePanelOpened()
+    $licensing.goToUpgradePage()
+  }
+
+  async function saveVariable(data: CreateEnvironmentVariableRequest) {
+    try {
+      await environment.createVariable(data)
+      //   configValueSetterCallback(`{{ env.${data.name} }}`)
+      modal.hide()
+    } catch (err: any) {
+      notifications.error(`Failed to create variable: ${err.message}`)
+    }
+  }
+</script>
+
+<EnvDropdown
+  on:change
+  on:blur
+  type={type === "port" ? "string" : type}
+  {value}
+  {error}
+  {placeholder}
+  variables={$environment.variables}
+  environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
+  showModal={() => modal.show()}
+  {handleUpgradePanel}
+/>
+
+<Modal bind:this={modal}>
+  <CreateEditVariableModal save={saveVariable} />
+</Modal>