diff --git a/package.json b/package.json
index 1dde321..a5fec79 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slider": "^1.3.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c6340b..a627c17 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.7
         version: 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.14
+        version: 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-radio-group':
         specifier: ^1.3.7
         version: 1.3.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -976,6 +979,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.14':
+    resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.7':
     resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
     peerDependencies:
@@ -4326,6 +4342,29 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-popover@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.0(@types/react@19.1.4)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
diff --git a/src/client/Preview.tsx b/src/client/Preview.tsx
index f40c6eb..bc44ef4 100644
--- a/src/client/Preview.tsx
+++ b/src/client/Preview.tsx
@@ -44,6 +44,20 @@ import { AnimatePresence, motion } from "motion/react";
 import React from "react";
 import { type FC, type PropsWithChildren, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
+import { MultiSelectComboBox } from "./components/NewMultiSelectCombobox";
+
+const options = [
+	{ value: "apple", label: "Apple", group: "Fruit" },
+	{ value: "banana", label: "Banana", group: "Fruit" },
+	{ value: "carrot", label: "Carrot", group: "Vegetable" },
+	{ value: "orange", label: "Orange", group: "Fruit" },
+	{ value: "broccoli", label: "Broccoli", group: "Vegetable" },
+	{ value: "grape", label: "Grape", group: "Fruit" },
+	{ value: "spinach", label: "Spinach", group: "Vegetable" },
+	{ value: "mango", label: "Mango", group: "Fruit" },
+	{ value: "potato", label: "Potato", group: "Vegetable" },
+	{ value: "kiwi", label: "Kiwi", group: "Fruit" },
+];
 
 type PreviewProps = {
 	wasmLoadState: WasmLoadState;
@@ -186,6 +200,9 @@ export const Preview: FC<PreviewProps> = ({
 								<UserSelect setOwner={setOwner} />
 							</div>
 						}
+						<MultiSelectComboBox
+							options={options}
+						/>
 						{parameters.length === 0 ? (
 							<div className="flex h-full w-full items-center justify-center overflow-x-clip rounded-xl border p-4">
 								<PreviewEmptyState />
diff --git a/src/client/components/NewMultiSelectCombobox.tsx b/src/client/components/NewMultiSelectCombobox.tsx
new file mode 100644
index 0000000..816fcef
--- /dev/null
+++ b/src/client/components/NewMultiSelectCombobox.tsx
@@ -0,0 +1,151 @@
+import { ChevronsUpDown, PlusIcon, XIcon } from "lucide-react";
+import { type FC, useRef, useState } from "react";
+import { Button } from "@/client/components/Button";
+
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/client/components/Popover";
+import { Badge } from "./Badge";
+
+type Option = { value: string; label: string; group?: string };
+
+type MultiSelectComboBoxProps = {
+	options: Option[];
+	value?: string[];
+	defaultValue?: string[];
+	canAddNew?: boolean;
+	badge?: "default" | "warning" | "destructive";
+};
+
+export const MultiSelectComboBox: FC<MultiSelectComboBoxProps> = ({
+	options,
+	defaultValue,
+	...props
+}) => {
+	const triggerRef = useRef<HTMLButtonElement>(null);
+
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useState<string[]>(props.value ?? []);
+
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [searchValue, setSearchValue] = useState("");
+
+	const onToggleValue = (value: string) => {
+		setValue((curr) => {
+			const newValue = [...curr];
+
+			const existingIndex = newValue.findIndex((v) => v === value);
+			if (existingIndex >= 0) {
+				newValue.splice(existingIndex, 1);
+			} else {
+				newValue.push(value);
+			}
+
+			return newValue;
+		});
+	};
+
+	const filteredOptions = options.filter(
+		(o) =>
+			!value.some((value) => value === o.value) &&
+			(o.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()) ||
+				o.value.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())),
+	);
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={(isOpen) => {
+				if (isOpen) {
+					inputRef.current?.focus();
+				} else {
+					setSearchValue("");
+				}
+				setOpen(isOpen);
+			}}
+		>
+			<PopoverTrigger asChild ref={triggerRef}>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="h-fit w-[300px] justify-between"
+				>
+					<div className="flex flex-wrap gap-2">
+						{value.length > 0 ? (
+							value.map((v) => (
+								<Badge asChild={true}>
+									<button
+										key={v}
+										onClick={(e) => {
+											e.stopPropagation();
+											onToggleValue(v);
+										}}
+									>
+										{options.find((o) => o.value === v)?.label ?? v}
+										<XIcon width={1} />
+									</button>
+								</Badge>
+							))
+						) : (
+							<span className="text-content-secondary">Select something</span>
+						)}
+					</div>
+					<ChevronsUpDown className="opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="flex w-full flex-col gap-2 p-2"
+				align="start"
+				style={{ width: triggerRef.current?.clientWidth }}
+			>
+				<input
+					ref={inputRef}
+					value={searchValue}
+					onChange={(e) => setSearchValue(e.target.value)}
+					className="w-full rounded-md border bg-surface-primary px-2 py-1 text-sm"
+					placeholder="Search"
+				/>
+
+				<div className="flex flex-col items-start">
+					{filteredOptions.length > 0
+						? filteredOptions
+								.filter((f) => !value.some((value) => value === f.value))
+								.map((framework) => (
+									<button
+										className="w-full rounded-md px-2 py-1 text-left hover:bg-surface-secondary"
+										type="button"
+										onClick={() => {
+											onToggleValue(framework.value);
+										}}
+										key={framework.value}
+									>
+										{framework.label}
+									</button>
+								))
+						: null}
+
+					{filteredOptions.length === 0 && searchValue === "" ? (
+						<p className="text-content-secondary text-center px-2">No values</p>
+					) : null}
+
+					{searchValue !== "" ? (
+						<Button
+							size="sm"
+							className="w-full h-8"
+							variant="outline"
+							onClick={() => {
+								setValue((curr) => [...curr, searchValue]);
+								setSearchValue("");
+							}}
+						>
+							Add {searchValue}
+						</Button>
+					) : null}
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+};
diff --git a/src/client/components/Popover.tsx b/src/client/components/Popover.tsx
new file mode 100644
index 0000000..c81be87
--- /dev/null
+++ b/src/client/components/Popover.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copied from shadcn/ui and modified on 12/13/2024
+ * @see {@link https://ui.shadcn.com/docs/components/popover}
+ */
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+	type ComponentPropsWithoutRef,
+	type ElementRef,
+	forwardRef,
+} from "react";
+import { cn } from "@/utils/cn";
+
+export const Popover = PopoverPrimitive.Root;
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const PopoverContent = forwardRef<
+	ElementRef<typeof PopoverPrimitive.Content>,
+	ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				`z-50 w-72 rounded-md border border-solid bg-surface-primary
+				text-content-primary shadow-md outline-none
+				data-[state=open]:animate-in data-[state=closed]:animate-out
+				data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+				data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+				data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+				data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
diff --git a/src/server/utils.tsx b/src/server/utils.tsx
index 2e1b567..b925c39 100644
--- a/src/server/utils.tsx
+++ b/src/server/utils.tsx
@@ -48,4 +48,139 @@ export const defaultCode = `terraform {
       version = "2.5.3"
     }
   }
+}
+
+# This example shows new form types and conditionality using dynamic parameters. 
+# When starting from scratch, retain the providers block above.
+# 
+# In the playground, you can get started with: 
+# - snippets for parameter types
+# - example forms for advanced use
+# - documentation for how and when to enable Dynamic Parameters.
+# 
+# You can edit user data in the "users" tab, and share your form via URL.
+# Enjoy Dynamic Parameters!
+
+locals {
+  ides = [
+    {
+      name = "VSCode",
+      value = "vscode",
+      icon = "/icon/code.svg"
+    },
+    {
+      name = "Jetbrains IntelliJ",
+      value = "intellij",
+      icon = "/icon/intellij.svg"
+    },
+    {
+      name = "Cursor",
+      value = "cursor",
+      icon = "/icon/cursor.svg"
+    },
+  ]
+
+  username = data.coder_workspace_owner.me.name
+  is_admin = contains(data.coder_workspace_owner.me.groups, "admin")
+}
+
+data "coder_workspace_owner" "me" {}
+
+data "coder_parameter" "dropdown_picker" {
+  name = "dropdown_picker"
+  display_name = "Pick your next parameter!"
+  description = "Hello \${username}, pick your next parameter using this \`dropdown\` parameter."
+  form_type = "dropdown"
+  mutable = true
+
+  option {
+    value = "ide_picker"
+    name = "IDE multi-select"
+  }
+
+  option {
+    value = "text_area"
+    name = "Large text entry"
+  }
+
+  option {
+    value = "cpu_slider"
+    name = "CPU slider"
+  }
+} 
+
+data "coder_parameter" "ide_picker" {
+  count = try(data.coder_parameter.dropdown_picker.value, "") == "ide_picker" ? 1 : 0
+  
+  name = "ide_picker"
+  display_name = "Pick your IDEs!"
+  description = "This is created using the \`form_type = 'multi-select'\` option."
+
+  type = "list(string)"
+  form_type = "multi-select"
+  order = 2
+  mutable = true
+
+  dynamic "option" {
+    for_each = local.ides
+    content {
+      name        = option.value.name
+      value       = option.value.value
+      description = option.value.description
+      icon        = option.value.icon
+    }
+  }
+}
+
+data "coder_parameter" "text_area" {
+  count = try(data.coder_parameter.dropdown_picker.value, "") == "text_area" ? 1 : 0
+  
+  name = "text_area"
+  display_name = "Enter a large AI prompt or script!"
+  description = "This is created using the \`form_type = 'textarea'\` option."
+  
+  type = "string"
+  form_type = "textarea"
+  order = 2
+  mutable = true
+
+  styling = jsonencode({
+    placeholder = <<-EOT
+  This is a large text entry, try it out!
+  
+  Including support for multi-line text entry.
+  EOT
+  }) 
+}
+
+data "coder_parameter" "cpu_slider" {
+  count = try(data.coder_parameter.dropdown_picker.value, "") == "cpu_slider" ? 1 : 0
+  name = "cpu_slider"
+  display_name = "CPU Cores Slider"
+  description = "This is created using the \`form_type = 'slider'\` option."
+  
+  type = "number"
+  form_type = "slider"
+  order = 2
+  default = 4
+  mutable = true
+
+  validation {
+    min = 2
+    max = 8
+  }
+}
+
+data "coder_parameter" "admin_only" {
+  count = local.is_admin ? 1 : 0
+  
+  name = "admin_only"
+  display_name = "Use imaginary experimental features?"
+  description = "This option is only available to those in the 'admin' group. You can hide it by changing your user data. \\n\\n _This does not actually enable experimental features._"
+
+  type = "bool"
+  form_type = "checkbox"
+  default = false
+  
+  order = 5
 }`;
