ContextQMD
Back to Copilotkit

Input

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

1.60.11.7 KB
Original Source

Overview

Input is a free-text control. The submitted text arrives in the inline onSubmit handler as a string. Place it as a direct child of Message (a sibling of Section / Actions) — on Slack it renders as its own input block, and an Input placed inside an Actions row is dropped by the renderer.

Import

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

Props

<PropertyReference name="onSubmit" type="ClickHandler<string>"> Inline handler run on submit. `ctx.action.value` is the entered text. See [`InteractionContext`](/reference/bot/types/InteractionContext). Must return `void` or `Promise<void>`. </PropertyReference> <PropertyReference name="placeholder" type="string"> Placeholder text shown while empty. </PropertyReference> <PropertyReference name="multiline" type="boolean"> Render as a multi-line text area. </PropertyReference> <PropertyReference name="name" type="string"> Identifier for the input. Currently unused by the Slack adapter. </PropertyReference>

Usage

tsx
<Message>
  <Section>Anything to add before I file this?</Section>
  <Input
    placeholder="Add a note for the postmortem…"
    multiline
    onSubmit={async ({ thread, action }) => {
      await thread.post(`Noted: ${action.value}`);
    }}
  />
</Message>

On Slack

Renders as an input block wrapping a plain_text_input element. Must be a top-level block — inside an Actions row the Slack renderer silently drops it.