# PromptInput

> Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot and a stop button while a response streams.

Source: https://ui.jcsoftdev.com/docs/components/prompt-input

Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot
and a stop button while a response streams.

## Import

```ts
import { PromptInput } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/prompt-input`.

## Usage

```tsx
<PromptInput
  placeholder="Pregunta por turnos, clientes o ingresos…"
  hint="Enter envía · Shift+Enter agrega una línea"
  streaming={false}
  disabled={false}
  maxRows={6}
  actions={attach}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` |  |  |
| `defaultValue` | `string` | `""` |  |
| `onValueChange` | `((value: string) => void)` |  |  |
| `onSubmit` | `((value: string) => void)` |  | Called with the trimmed text on Enter or send. Never called when empty. |
| `streaming` | `boolean` |  | While true the send button becomes a stop button. |
| `onStop` | `(() => void)` |  |  |
| `placeholder` | `string` | `"Escribe un mensaje…"` |  |
| `label` | `string` | `"Mensaje"` | Accessible name of the textarea. |
| `disabled` | `boolean` |  |  |
| `maxRows` | `number` | `6` | Rows after which the textarea scrolls instead of growing. |
| `attachments` | `ReactNode` |  | Row above the text (Attachment chips). |
| `actions` | `ReactNode` |  | Left of the send button (attach button, model picker…). |
| `hint` | `ReactNode` |  | Hint line under the field. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-promptinput--default)
- [With Attachments](/storybook/?path=/story/ai-promptinput--with-attachments)
- [Streaming](/storybook/?path=/story/ai-promptinput--streaming)
- [Echo](/storybook/?path=/story/ai-promptinput--echo)
- [Narrow](/storybook/?path=/story/ai-promptinput--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-promptinput--preset-brutal)

## Source

`packages/ui/src/ai/prompt-input/prompt-input.tsx`