Skip to main content

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.