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.

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