Back to Components

AI

PromptInput

Chat composer — auto-growing textarea in an input-shaped shell, Enter to send, Shift+Enter for a newline, and a send button that flips to stop while a response streams.

Examples

Composer

<PromptInput
  placeholder="Ask anything…"
  {busy}
  onSubmit={(v) => send(v)}
  onStop={() => abort()}
/>

Header + actions slots

README.md tokens.css
<PromptInput onSubmit={send}>
  {#snippet header()}
    <Chip>README.md</Chip>
    <Chip>tokens.css</Chip>
  {/snippet}
  {#snippet actions()}
    <Button variant="ghost" size="sm">@</Button>
  {/snippet}
</PromptInput>

Disabled

<PromptInput disabled placeholder="Read-only session" />

Props

PropTypeDefaultDescription
valuestring (bindable)The draft text.
placeholderstringDefault "Message…".
busybooleanSend flips to a stop button for the streamed response.
disabledbooleanDims and locks the composer.
maxRowsnumberAuto-grow cap in text lines. Default 8.
onSubmit(value: string) => voidEnter or send — value arrives trimmed, input clears.
onStop() => voidStop button while busy.
headerSnippetRow above the textarea — context chips, attachments.
actionsSnippetButtons left of send — use <Button size="sm" icon>.

Install

CLI

npx @a3tai/mittsu add prompt-input