Combobox

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

A Combobox panel on a Product Card component to pick a product by name

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.

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.

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

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())
          );
      },
    }),
  },
});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.