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.
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.