Components · AI
Prompt Input
The composer for a chat: an auto-growing text field with Send, which turns into Stop while a reply streams.
import { PromptInput } from '@nexub/react';Usage
The message box of a chat or assistant.
Any free-text prompt that starts a long-running, stoppable generation.
Ordinary forms: use Textarea, where Enter adds a line.
Search: use SearchInput.
Examples
Default
Enter sends, Shift+Enter adds a line. Send stays inert until there is text.
Attachments and actions
Streaming
Send a message: the button turns into Stop for three seconds. Stop or Escape ends it early.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string | — | Controlled or uncontrolled text. Uncontrolled input clears itself after a submit. |
| onSubmit | (value: string) => void | — | Called with the text on Enter or Send. Not called while empty, disabled or not idle. |
| onStop | () => void | — | Called by Stop, or Escape in the field, while status="streaming". |
| status | 'idle' | 'submitting' | 'streaming' | 'idle' | streaming swaps Send for Stop; submitting holds Send until the request is accepted. |
| maxRows | number | 8 | Rows the field grows to before it scrolls. |
| attachments | ReactNode | — | Rendered above the text, e.g. removable Chips. |
| actions | ReactNode | — | Rendered bottom-start, e.g. an attach IconButton or a model picker. |
| surface | 'solid' | 'glass' | 'solid' | Glass material for composers floating over content. |
| label | string | messages.promptLabel ('Message') | Accessible name of the text field. |
| messages | Partial<PromptInputMessages> | — | Local overrides for promptLabel, sendMessage, stopGenerating, promptHint. |
| textareaClassName | string | — | Class for the textarea; className goes to the outer container. |
Accessibility
ARIA roles
Keyboard
- Enter
Sends. Ignored while an IME composition is open.
- Shift + Enter
New line.
- Escape
Stops the reply while streaming.
Focus
Focus stays in the field after sending, so the user can type the next message straight away.
An empty field keeps Send focusable with `aria-disabled`, rather than removing it from the tab order.
Screen reader
The field is named by `label` (default "Message") and described by the Enter/Shift+Enter hint.
Send and Stop are icon buttons with their own names; the swap does not move focus.
On iOS & Android
Web only