ContextQMD
Back to Copilotkit

Select

showcase/shell-docs/src/content/reference/bot/components/Select.mdx

1.60.11.5 KB
Original Source

Overview

Select is a dropdown for an Actions row. The selection handler is inline, like Button's onClick; the selected option's value arrives as a string.

Import

tsx
import { Select } from "@copilotkit/bot-ui";

Props

<PropertyReference name="onSelect" type="ClickHandler<string>"> Inline handler run on selection. `ctx.action.value` is the chosen option's `value` (a `string`). See [`InteractionContext`](/reference/bot/types/InteractionContext). Must return `void` or `Promise<void>`. </PropertyReference> <PropertyReference name="placeholder" type="string"> Placeholder shown before a selection is made. </PropertyReference> <PropertyReference name="options" type="{ label: string; value: string }[]" required> The selectable options (`SelectOption[]`). </PropertyReference>

Usage

tsx
<Actions>
  <Select
    placeholder="Pick a severity"
    options={[
      { label: "SEV1 — page someone", value: "sev1" },
      { label: "SEV2 — business hours", value: "sev2" },
      { label: "SEV3 — backlog", value: "sev3" },
    ]}
    onSelect={async ({ thread, action }) => {
      await thread.post(`Severity set to ${action.value}.`);
    }}
  />
</Actions>

On Slack

Renders as a static_select element — at most 100 options (SLACK_LIMITS.selectOptions).