Select

Adds a Select option (dropdown) to a component in the Makeswift builder to visually select a string value.

A Select panel for a Button component to change the style

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.

labelOrientation · "vertical" | "horizontal" · default: "horizontal"

Orientation of the dropdown label within the panel.

options · SelectOption<T>[] · required

An array of objects of type SelectOption<T> that contains the options available in the panel input.

type SelectOption<T extends string> = {
  value: T;
  label: string;
};

The label field is displayed in the Makeswift builder.

defaultValue · T

The value passed to your component when nothing is set in the Makeswift builder.

Prop type

The Select control passes the generic type T from the selected Option to your component. If you don’t set a defaultValue and no value is set in the builder, your component will receive undefined.

Example

The following example adds a Select control to the variant prop of a Button component.

Button.makeswift.ts

import { Select } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    variant: Select({
      label: "Style",
      labelOrientation: "horizontal",
      options: [
        { value: "floating", label: "Floating" },
        { value: "outline", label: "Outline" },
        { value: "clear", label: "Clear" },
      ],
      defaultValue: "floating",
    }),
  },
});

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