# Prompt Input

AI prompt composer with a field that grows as you type and a button that turns from mic to send to stop. Attach photos and files, switch modes, and an empty send is gently refused.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/prompt-input
```

## Import

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

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | — |
| `defaultValue?` | `string` | — |
| `onValueChange?` | `(value: string) => void` | — |
| `onSubmit?` | `(value: string) => void | Promise<void>` | Called with the trimmed prompt. A rejected promise keeps the draft. |
| `loading?` | `boolean` | A reply is generating — the button becomes stop. |
| `onStop?` | `() => void` | — |
| `attachments?` | `PromptAttachment[]` | Attachment chips shown above the field. |
| `onAttach?` | `() => void` | Shows the + button; open your picker here. |
| `onRemoveAttachment?` | `(id: string) => void` | Shows a remove control on each chip. |
| `models?` | `PromptModel[]` | Modes or models for the pill menu. |
| `model?` | `string` | Controlled model value. |
| `defaultModel?` | `string` | Uncontrolled initial model. Default the first. |
| `onModelChange?` | `(value: string) => void` | — |
| `onVoice?` | `() => void` | Shows a mic in the send slot while the composer is empty. |
| `actions?` | `PromptAction[]` | Extra tool buttons after the attach / model controls. |
| `onAction?` | `(action: PromptAction) => void` | Fired after an action's own `onPress`. |
| `placeholder?` | `string` | — |
| `minRows?` | `number` | Min visible rows. Default 1. |
| `maxRows?` | `number` | Rows before the field scrolls. Default 6. |
| `accessibilityLabel?` | `string` | Accessible label of the field. Default "Prompt". |
| `disabled?` | `boolean` | — |
| `avoidKeyboard?` | `boolean` | Lift the composer above the keyboard (native). Use when it is pinned to the screen bottom. |
| `glass?` | `boolean` | Float on Lumio glass — only over moving or photographic content. |
| `className?` | `string` | — |

## Icons rendered

- `x` — /icons.html?i=x
- `file-text` — /icons.html?i=file-text
- `check` — /icons.html?i=check
- `chevron-down` — /icons.html?i=chevron-down
- `plus` — /icons.html?i=plus
- `mic` — /icons.html?i=mic
- `arrow-up` — /icons.html?i=arrow-up

Source: https://lumioui.com/components/prompt-input