> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Combobox

> Adds a Combobox panel in the Makeswift builder to visually edit a generic prop from a list of options.

Adds a Combobox panel in the Makeswift builder to visually edit a generic prop from a list of options.

![](/_fern-img/1baa9b6f4b19b1aa032db64a616dfe89b203d8e30597ce3349b3207d1bb26459.webp)

## Params

**`label`** `string` — default: Text

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`getOptions`** `getComboboxOptions<T>` — required

A function that receives a query string and returns an array of type `Option<T>`. This function may be async to fetch options asynchronously.

```ts
type getComboboxOptions<T> = (
  query: string
) => ComboboxOption<T>[] | Promise<ComboboxOption<T>[]>;

type ComboboxOption<T> = {
  id: string;
  label: string;
  value: T;
};
```

The `label` field is displayed in the Makeswift builder and `id` must be unique.

---

## Prop type

The Combobox control passes the generic type `T` from the selected `Option` to your component, or `undefined` if there is no value set in the builder.

## Example

The following example adds a Combobox control to the `product` prop of a Product Card component.

**`ProductCard.makeswift.ts`**

```tsx ProductCard.makeswift.ts
import { Combobox } from "@makeswift/runtime/controls";

import { fetchProducts } from "@/lib/fetchers";
import { runtime } from "@/makeswift/runtime";

import { ProductCard } from "./ProductCard";

runtime.registerComponent(ProductCard, {
  type: "product-card",
  label: "Product Card",
  props: {
    product: Combobox({
      label: "Product name",
      async getOptions(query) {
        const products = await fetchProducts();

        return products
          .map((product) => ({
            id: product.id,
            label: product.name,
            value: product,
          }))
          .filter((option) =>
            option.label.toLowerCase().includes(query.toLowerCase())
          );
      },
    }),
  },
});
```

**`ProductCard.tsx`**

```tsx ProductCard.tsx
interface Product {
  id: string
  name: string
  price: number
  image: string
}

interface Props {
  product?: Product
}

const defaultProduct = {
  id: "1",
  name: "Default product",
  price: 100,
  image: "https://via.placeholder.com/150",
}

export function ProductsCarousel({ product = defaultProduct }: Props) {
  return (
    <div className="grid gap-4">
      <img src={product.image}>
      <h2>{product.name}</h2>
      <p>{product.price}</p>
    </div>
  )
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).