Prompt Input

FreeNew

A chat composer with an auto-growing textarea, file attachments and a send button that turns into Stop while a reply streams.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value

defaultValue

status

disabled

maxHeight200

placeholder

submitLabel

stopLabel

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/prompt-input.json

Usage

import {
  PromptInput,
  PromptInputAttachButton,
  PromptInputAttachments,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputToolbar,
} from "@/components/ui/prompt-input"

<PromptInput
  status={status}
  onSubmit={(text, files) => send(text, files)}
  onStop={() => abort()}
>
  <PromptInputAttachments />
  <PromptInputTextarea placeholder="Ask anything…" />
  <PromptInputToolbar>
    <PromptInputAttachButton />
    <PromptInputSubmit />
  </PromptInputToolbar>
</PromptInput>

With no children, PromptInput renders the attachments, textarea and a toolbar with the send button. The attach button is added when onFilesChange is set.

Props

PromptInput

Prop	Type	Default	Description
`onSubmit`	`(value: string, files: File[]) => void`	-	Called with the trimmed text and files on Enter or the send button. Uncontrolled inputs clear afterwards.
`value`	`string`	-	Controlled text. Clear it yourself in `onSubmit`.
`defaultValue`	`string`	`""`	Initial text when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called on every edit.
`files`	`File[]`	-	Controlled attachments.
`onFilesChange`	`(files: File[]) => void`	-	Called when files are attached or removed. Nothing is uploaded.
`status`	`"idle" \| "streaming"`	`"idle"`	`"streaming"` turns the send button into Stop and blocks new submissions.
`onStop`	`() => void`	-	Called by the Stop button while streaming.
`disabled`	`boolean`	`false`	Disables typing, attaching and sending.

Also accepts all <form> props.

PromptInputTextarea

Prop	Type	Default	Description
`maxHeight`	`number`	`200`	Height in px the textarea grows to before it scrolls.
`placeholder`	`string`	`"Send a message…"`	Placeholder text.

Also accepts all <textarea> props except value and defaultValue.

PromptInputSubmit

Prop	Type	Default	Description
`submitLabel`	`string`	`"Send message"`	Accessible name of the send button.
`stopLabel`	`string`	`"Stop generating"`	Accessible name of the stop button.

PromptInputAttachButton

Prop	Type	Default	Description
`accept`	`string`	-	File types to accept, as for `<input accept>`.
`multiple`	`boolean`	`true`	Allow picking several files at once.
`label`	`string`	`"Attach files"`	Accessible name of the icon button.

PromptInputToolbar and PromptInputAttachments

PromptInputToolbar is the bottom row (a <div>). PromptInputAttachments renders a removable chip per attached file (a <ul>) and nothing when there are none. usePromptInput() reads the shared state from a custom part.

Accessibility

Enter sends, Shift+Enter inserts a newline, and Enter that confirms an IME composition is ignored.
The textarea is labelled "Message" unless you pass aria-labelledby.
Each attachment chip has a Remove <file name> button.