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. Read more about this pattern here.

Was this page helpful?

RichTextShape