The Combobox (autocomplete) control provides your component a value from a set of options selectable in the Makeswift builder. The options can be retrieved asynchronously (i.e., the result of an API call).


AnchorSpaceX rocket

In this example we register a SpaceXRocket component with its rocket prop controlled by a Combobox component which gets its options from the open-source SpaceX REST API.

Note that the getOptions function must return an array—or a promise of an array—of options. Each option must have the fields id, label, and value.

SpaceX rocket combobox panel

import { ReactRuntime } from '@makeswift/runtime/react'
import { Combobox } from '@makeswift/runtime/controls'

function SpaceXRocket({ rocket }) {
  if (rocket == null) return <p>Select a rocket.</p>

  return (
      { => (
        <img alt={} key={image} src={image} />

ReactRuntime.registerComponent(SpaceXRocket, {
  type: 'spacex-rocket',
  label: 'SpaceX Rocket',
  props: {
    rocket: Combobox({
      label: 'SpaceX rocket',
      async getOptions(query) {
        const response = await fetch(``)
        const rockets = await response.json()

        return rockets
          .map(rocket => ({ id:, label:, value: rocket }))
          .filter(option => option.label.toLowerCase().includes(query.toLowerCase()))



labelstringno'Text'Text for the panel label.
getOptions(query: string) => ComboboxControlOption[] | Promise<ComboboxControlOption[]>yesN/AA function that receives a query string and returns an array of options for the user.

AnchorProvided value

The Combobox control provides a value to your component—or undefined if there's no value set. The value provided is the same one in the value field of the selected option from getOptions.


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