diff --git a/src/app/sandbox/combobox/page.tsx b/src/app/sandbox/combobox/page.tsx
new file mode 100644
index 00000000..273314bf
--- /dev/null
+++ b/src/app/sandbox/combobox/page.tsx
@@ -0,0 +1,66 @@
+"use client";
+import { useState } from "react";
+import Combobox from "@/components/ui/combobox";
+import populateCragsAction from "./server-actions/populate-crags-action";
+import populateRoutesAction from "./server-actions/populate-routes-action";
+
+function ComboboxPage() {
+
+ async function populateCrags(text: string) {
+ if (text === "") {
+ return [];
+ }
+ const crags = await populateCragsAction(text);
+ return crags.map((crag) => ({
+ value: crag.id,
+ name: crag.name,
+ }));
+ }
+
+ async function populateRoutes(text: string) {
+ if (text === "") {
+ return [];
+ }
+ const routes = await populateRoutesAction(text);
+ return routes.map((route) => ({
+ value: route.id,
+ name: `${route.name}, ${route.crag.name}`,
+ }));
+ }
+
+ function handleChange(a) {
+ console.log("handleChange", a);
+ }
+
+ return (
+
+ );
+}
+
+export default ComboboxPage;
diff --git a/src/app/sandbox/combobox/server-actions/populate-crags-action.ts b/src/app/sandbox/combobox/server-actions/populate-crags-action.ts
new file mode 100644
index 00000000..30f0bd35
--- /dev/null
+++ b/src/app/sandbox/combobox/server-actions/populate-crags-action.ts
@@ -0,0 +1,42 @@
+"use server";
+
+import { gql } from "urql/core";
+import {
+ ComboboxPopulateCragsDocument,
+ Crag,
+ RouteDifficultyVotesDocument,
+} from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+
+async function populateCragsAction(
+ query: string
+): Promise {
+ const result = await urqlServer().query(ComboboxPopulateCragsDocument, {
+ input: {
+ query,
+ pageSize: 10,
+ orderBy: { field: "popularity", direction: "DESC" },
+ },
+ });
+
+ if (result.error) {
+ return Promise.reject(result.error);
+ }
+
+ return result.data.searchCrags.items;
+}
+
+export default populateCragsAction;
+
+gql`
+ query ComboboxPopulateCrags($input: SearchCragsInput!) {
+ searchCrags(input: $input) {
+ items {
+ __typename
+ id
+ name
+ slug
+ }
+ }
+ }
+`;
diff --git a/src/app/sandbox/combobox/server-actions/populate-routes-action.ts b/src/app/sandbox/combobox/server-actions/populate-routes-action.ts
new file mode 100644
index 00000000..c3f0f028
--- /dev/null
+++ b/src/app/sandbox/combobox/server-actions/populate-routes-action.ts
@@ -0,0 +1,40 @@
+"use server";
+
+import { gql } from "urql/core";
+import { ComboboxPopulateCragsDocument, ComboboxPopulateRoutesDocument, Route } from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+
+async function populateRoutesAction(query: string): Promise {
+ const result = await urqlServer().query(ComboboxPopulateRoutesDocument, {
+ input: {
+ query,
+ pageSize: 10,
+ orderBy: { field: "popularity", direction: "DESC" },
+ },
+ });
+
+ if (result.error) {
+ return Promise.reject(result.error);
+ }
+
+ return result.data.searchRoutes.items;
+}
+
+export default populateRoutesAction;
+
+gql`
+ query ComboboxPopulateRoutes($input: SearchRoutesInput!) {
+ searchRoutes(input: $input) {
+ items {
+ __typename
+ id
+ name
+ slug
+ crag {
+ id
+ name
+ }
+ }
+ }
+ }
+`;
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 00000000..541f941f
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,121 @@
+import useForwardedRef from "@/hooks/useForwardedRef";
+import {
+ Combobox as HUICombobox,
+ ComboboxInput,
+ ComboboxOption,
+ ComboboxOptions,
+ Field,
+ ComboboxButton,
+ Label,
+} from "@headlessui/react";
+import { ForwardedRef, forwardRef, useEffect, useState } from "react";
+import IconSearch from "./icons/search";
+
+type TComboboxProps = {
+ name?: string;
+ value?: TComboboxValue | null;
+ type?: string;
+ onChange: (value: string | null) => void;
+ label?: string;
+ placeholder?: string;
+ description?: string;
+ errorMessage?: string;
+ disabled?: boolean;
+ onBlur?: () => void;
+ populate: (text: string) => Promise;
+};
+
+type TComboboxValue = {
+ value: string;
+ name: string;
+};
+
+const Combobox = forwardRef(function Combobox(
+ {
+ value,
+ onChange,
+ label,
+ errorMessage,
+ disabled,
+ populate,
+ }: TComboboxProps,
+ forwardedRef: ForwardedRef
+) {
+ const inputRef = useForwardedRef(forwardedRef);
+
+ const focusInput = () => {
+ inputRef.current?.focus();
+ };
+
+ const [selectedValue, setSelectedValue] = useState(value);
+ const [query, setQuery] = useState("");
+
+ const [options, setOptions] = useState([]);
+
+ useEffect(() => {
+ populate(query).then((result) => {
+ setOptions(result);
+ });
+ }, [query, populate]);
+
+ function handleChange(newValue: TComboboxValue) {
+ setSelectedValue(newValue);
+ onChange(newValue?.value || null);
+ }
+
+ return (
+
+ {label && }
+ setQuery("")}
+ >
+
+
value?.name}
+ onChange={(event) => setQuery(event.target.value)}
+ className="flex-1 outline-none min-w-0 rounded-lg w-full py-2 placeholder:text-neutral-400 pl-4"
+ autoComplete="off"
+ />
+
+
+
+
+
+