# Prompt Input
Source: https://ui.spencerwueste.com/docs/components/prompt-input
Markdown: https://ui.spencerwueste.com/llm/components/prompt-input.md

> Composable chat input with an auto-resizing textarea and action slots.

> Live preview: https://ui.spencerwueste.com/docs/components/prompt-input (demo source: `src/demos/prompt-input-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/prompt-input.json
```

Manual install dependencies: `radix-ui`

Registry JSON: https://ui.spencerwueste.com/r/prompt-input.json

## Usage

```tsx
import {
  PromptInput,
  PromptInputAction,
  PromptInputActionGroup,
  PromptInputActions,
  PromptInputTextarea,
} from "@/components/pandacoderz-ui/prompt-input";
```

```tsx
<PromptInput onSubmit={(text) => send(text)}>
  <PromptInputTextarea value={value} onChange={(e) => setValue(e.target.value)} />
  <PromptInputActions>
    <PromptInputActionGroup>{/* left actions */}</PromptInputActionGroup>
    <PromptInputActionGroup>{/* right actions */}</PromptInputActionGroup>
  </PromptInputActions>
</PromptInput>
```

Enter submits, Shift+Enter inserts a newline. Clicking anywhere on the container that isn't a control focuses the textarea.

## API Reference

### PromptInput

| Prop | Type | Description |
| --- | --- | --- |
| `onSubmit` | `(value: string) => void` | Called on Enter without Shift. |
| `className` | `string` | Extra classes for the container. |

### PromptInputTextarea

Accepts all `textarea` props. Defaults to a placeholder of "How can I help you today?" and grows up to 10 rows before scrolling.

### PromptInputAction

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` | Merge into the child element instead of rendering a wrapper. |
| `tooltip` | `string \| { content, side, shortcut }` | Tooltip content, optional placement, and keyboard hint. |