Prompt Input
.mdChat composer with an auto-growing textarea, model picker and attachment chips; the send button morphs into a stop button while a reply streams.
aichatcomposertextareainputattachmentsmodel selector
Installation
$npx shadcn@latest add @geturui/prompt-input
Usage
usage.tsx
1import { PromptInput } from "@/components/ai/prompt-input";
2
3export function Composer() {
4 const [streaming, setStreaming] = React.useState(false);
5 return (
6 <PromptInput
7 models={[
8 { id: "swift", label: "Swift", description: "Fast answers" },
9 { id: "deep", label: "Deep", description: "Reasons step by step" },
10 ]}
11 streaming={streaming}
12 onSubmit={(text, files) => {
13 setStreaming(true);
14 sendToModel(text, files).finally(() => setStreaming(false));
15 }}
16 onStop={() => setStreaming(false)}
17 />
18 );
19}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmit | (value: string, attachments: PromptAttachment[]) => void | — | Called with the trimmed prompt and current attachments. |
streaming | boolean | false | Morphs the send button into a stop button. |
onStop | () => void | — | Called when the stop button is pressed. |
value / defaultValue | string | — | Controlled or initial text. |
onValueChange | (value: string) => void | — | Called on every edit. |
attachments / defaultAttachments | PromptAttachment[] | — | Controlled or initial attachment chips ({ id, name, size?, kind? }). |
onAttachmentsChange | (attachments: PromptAttachment[]) => void | — | Called when files are added or removed. |
models | PromptModel[] | — | Options for the model pill ({ id, label, description? }). Hidden when empty. |
model / defaultModel | string | — | Controlled or initial model id. |
onModelChange | (id: string) => void | — | Called when a model is picked. |
submitOn | "mod-enter" | "enter" | "mod-enter" | Cmd/Ctrl+Enter submits, or Enter submits and Shift+Enter adds a line. |
maxRows | number | 8 | Rows the textarea grows to before scrolling. |
clearOnSubmit | boolean | true | Clear text and attachments after submitting. |
placeholder | string | "Ask anything…" | Textarea placeholder. |
disabled | boolean | — | Disables the whole composer. |
Accessibility
- Textarea is labelled and described by the visible keyboard hint.
- Cmd/Ctrl+Enter submits; IME composition is respected.
- Model pill is a listbox button: arrows move, Enter selects, Escape closes and restores focus.
- Every icon button (attach, remove chip, send, stop) has an aria-label that reflects its current action.