Prompt Input

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/prompt-input

Usage

import { PromptInput } from "@/components/ui/prompt-input/prompt-input";
<PromptInput />

API reference

Prop Type Default
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.

 false
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 "Ask anything"
minRows number

Min visible rows. Default 1.

 1
maxRows number

Rows before the field scrolls. Default 6.

 6
accessibilityLabel string

Accessible label of the field. Default "Prompt".

 "Prompt"
disabled boolean —
avoidKeyboard boolean

Lift the composer above the keyboard (native). Use when it is pinned to the screen bottom.

 false
glass boolean

Float on Lumio glass — only over moving or photographic content.

 false
className string —