PromptInput

A multi-line textarea with a submit button designed for AI chat interfaces, supporting loading states and attachment slots.

import { PromptInput } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add prompt-input

Import

import.tsx

import { PromptInput } from "@aetherstack/ui"

Usage

promptinput.tsx

const [value, setValue] = React.useState("")

<PromptInput
  value={value}
  onValueChange={setValue}
  onSubmit={(v) => console.log("submit:", v)}
  placeholder="Ask anything…"
  isLoading={false}
  maxLength={4000}
/>

Props

Prop	Type	Default	Description
value	string	""	Controlled textarea value.
onValueChange	(v: string) => void	—	Callback on value change.
onSubmit	(value: string) => void	—	Called when user submits via Enter key or the submit button.
placeholder	string	"Ask anything…"	Textarea placeholder text.
disabled	boolean	false	Disables the input and submit button.
isLoading	boolean	false	Shows a spinner on the submit button while a response is in flight.
maxLength	number	—	Character limit; a counter is shown near the submit button when set.
attachSlot	React.ReactNode	—	Slot rendered above the textarea — typically AttachmentChip components.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Submit button label changes to 'Stop' during loading so screen readers reflect the current action.
→Keyboard shortcut: Enter submits, Shift+Enter inserts a newline.
→Character counter is announced via aria-live when approaching the limit.