AI Prompt Input

The composer — the focused input where users type their prompt, ready to send to the assistant. Shown here in a 'Start a conversation' empty-state panel.

Loading demo: ai-prompt-input-real-world

Installation

npx sdaia-ui@latest add ai-prompt-input

Usage

import { AiPromptInput } from "sdaia-ui"

1<AiPromptInput
2  style="brand"
3  placeholder="Ask anything…"
4  limit={1000}
5  value={value}
6  onChange={(e) => setValue(e.target.value)}
7  onSend={(text) => send(text)}
8  streaming={isStreaming}
9  onStop={() => stop()}
10/>

Examples

Default

The neutral field — placeholder visible, counter hidden until focus or input.

Loading demo: ai-prompt-input-default

Brand

Brand style — a high-emphasis, brand-tinted composer surface.

Loading demo: ai-prompt-input-brand

Outline

Outline style — a quieter bordered field for dense contexts.

Loading demo: ai-prompt-input-outline

Streaming

While the assistant responds, the send button becomes a stop button.

Loading demo: ai-prompt-input-streaming

Error

The prompt exceeds the limit — red border, red counter and a helper message.

Loading demo: ai-prompt-input-error

API Reference

Prop	Type	Default	Required
style	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
value	string	—	optional
defaultValue	string	—	optional
onChange	(e: ChangeEvent<HTMLTextAreaElement>) => void	—	optional
placeholder	string	'Ask anything…'	optional
limit	number	1000	optional
showCounter	boolean	auto	optional
error	boolean	auto	optional
errorMessage	ReactNode	limit message	optional
streaming	boolean	false	optional
disabled	boolean	false	optional
showAttach	boolean	true	optional
showRecord	boolean	true	optional
onAttach	(e) => void	—	optional
onRecord	(e) => void	—	optional
onSend	(value: string) => void	—	optional
onStop	(e) => void	—	optional
sendDisabled	boolean	false	optional
submitOnEnter	boolean	false	optional
attachIcon / recordIcon / sendIcon / stopIcon	string	DGA defaults	optional