Select

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

Params

label

stringDefaults to 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"Defaults to 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.

1 type SelectOption<T extends string> = {
2   value: T;
3   label: string;
4 };

The label field is displayed in the Makeswift builder.

defaultValue

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.

1 import { Select } from "@makeswift/runtime/controls";
2 
3 import { runtime } from "../../../../../makeswift/runtime";
4 
5 import { Button } from "./Button";
6 
7 runtime.registerComponent(Button, {
8   type: "button",
9   label: "Button",
10   props: {
11     variant: Select({
12       label: "Style",
13       labelOrientation: "horizontal",
14       options: [
15         { value: "floating", label: "Floating" },
16         { value: "outline", label: "Outline" },
17         { value: "clear", label: "Clear" },
18       ],
19       defaultValue: "floating",
20     }),
21   },
22 });

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

1	type SelectOption<T extends string> = {
2	value: T;
3	label: string;
4	};

1	import { Select } from "@makeswift/runtime/controls";
2
3	import { runtime } from "../../../../../makeswift/runtime";
4
5	import { Button } from "./Button";
6
7	runtime.registerComponent(Button, {
8	type: "button",
9	label: "Button",
10	props: {
11	variant: Select({
12	label: "Style",
13	labelOrientation: "horizontal",
14	options: [
15	{ value: "floating", label: "Floating" },
16	{ value: "outline", label: "Outline" },
17	{ value: "clear", label: "Clear" },
18	],
19	defaultValue: "floating",
20	}),
21	},
22	});