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
npx sdaia-ui@latest add ai-prompt-input
import { AiPromptInput } from "sdaia-ui"1<AiPromptInput2style="brand"3placeholder="Ask anything…"4limit={1000}5value={value}6onChange={(e) => setValue(e.target.value)}7onSend={(text) => send(text)}8streaming={isStreaming}9onStop={() => stop()}10/>
The neutral field — placeholder visible, counter hidden until focus or input.
Loading demo: ai-prompt-input-default
Brand style — a high-emphasis, brand-tinted composer surface.
Loading demo: ai-prompt-input-brand
Outline style — a quieter bordered field for dense contexts.
Loading demo: ai-prompt-input-outline
While the assistant responds, the send button becomes a stop button.
Loading demo: ai-prompt-input-streaming
The prompt exceeds the limit — red border, red counter and a helper message.
Loading demo: ai-prompt-input-error
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 |