> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Select

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

<Frame type="glass" caption="A Select panel for a Button component to change the style">
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/select-panel.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=345980cbcb9de8a3ea759bcf20b47340" width="2048" height="1280" data-path="images/select-panel.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="Text">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="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).
</ParamField>

<ParamField query="labelOrientation" type="&#x22;vertical&#x22; | &#x22;horizontal&#x22;" default="horizontal">
  Orientation of the dropdown label within the panel.
</ParamField>

<ParamField query="options" type="SelectOption<T>[]" required>
  An array of objects of type `SelectOption<T>` that contains the options available in the panel input.

  ```ts theme={null}
  type SelectOption<T extends string> = {
    value: T;
    label: string;
  };
  ```

  The `label` field is displayed in the Makeswift builder.
</ParamField>

<ParamField query="defaultValue" type="T">
  The value passed to your component when nothing is set in the Makeswift
  builder.
</ParamField>

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

<CodeGroup>
  ```tsx Button.makeswift.ts theme={null}
  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",
      }),
    },
  });
  ```

  ```tsx Button.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

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