# Prompt input

> Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.

Component · Pro · https://lodeui.com/components/prompt-input

## When to use

- Chat and AI composers with attachments and a stop button.

## When not to use

- Plain comments: use a textarea.

## Installation

```bash
npx shadcn@latest add @lode/prompt-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PromptInput } from "@/components/ui/prompt-input";

export function Composer({ send, generating, stop }: { send: (t: string, f: File[]) => void; generating: boolean; stop: () => void }) {
  return <PromptInput onSubmit={send} generating={generating} onStop={stop} />;
}
```

## API reference

### PromptInput

Grows with text, takes files by picker, paste or drop, Enter to send.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onSubmit | `(text, files) => void` | – | Called on send. |
| generating / onStop | `boolean / () => void` | – | Turns send into stop. |
| toolbar | `ReactNode` | – | Model picker or other controls. |
| placeholder / maxLength | `string / number` | `"Ask anything…" / 8000` | Text limits. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Send |
| Shift+Enter | New line |
| ⌘V / Ctrl+V | Paste files |

## Accessibility

- All buttons labelled; attachments have labelled remove buttons.
- Enter is ignored while composing with an IME.

## Motion

- Attachments pop in; send morphs into stop.

## Responsive behavior

- Full width; toolbar wraps.

## Performance

- Auto-resize on input only.

## Notes for AI

- Clear your own state after onSubmit; the input clears itself.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.
- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.