> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Select

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

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

![](/_fern-img/4afd2b621df09d4d1c7dcb7166ca5319aaf5ffe379cb5b9316d73826a7b8790e.webp)

## 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`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.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.

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

**`Button.makeswift.ts`**

```tsx Button.makeswift.ts
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",
    }),
  },
});
```

**`Button.tsx`**

```tsx Button.tsx
import clsx from "clsx";

interface Props {
  variant?: "floating" | "outline" | "clear";
}

export function Button({ variant = "floating" }: Props) {
  return (
    <a
      className={clsx(
        "px-4 py-3 rounded",
        {
          floating: "bg-primary text-white shadow",
          outline: "bg-transparent border border-primary text-primary",
          clear: "text-primary bg-transparent border-none",
        }[variant]
      )}
      href={link.href}
      target={link.target}
    >
      Click me
    </a>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).