PromptInput

Multi-line, auto-expanding text input for AI chat interfaces. Includes attachment support, keyboard shortcuts, and smooth height animation.

Preview

Users can attach images, PDFs, or other files. Attachments appear as removable previews above the input.

Disable the input and show a spinner while the AI is generating a response.

Internally uses a textarea with JavaScript-driven height calculation. Enter submits; Shift+Enter inserts a newline.

Prop	Type	Default	Description
`onSubmit`	`(value: string, attachments?: Attachment[]) => void`	—	Callback with entered text and optional attachments.
`placeholder`	`string`	`"Type a message..."`	Placeholder when input is empty.
`disabled`	`boolean`	`false`	Disables input and send button.
`loading`	`boolean`	`false`	Shows loading spinner on send button.
`maxLines`	`number`	`6`	Maximum height in lines before scrolling.
`value`	`string`	—	Controlled input value.
`onChange`	`(value: string) => void`	—	Change callback for controlled usage.
`accept`	`string`	`"image/*,.pdf,.txt,.md,.json"`	Accepted file types for attachments.
`maxAttachments`	`number`	`5`	Maximum number of attachments allowed.

Prop	Type	Default	Description
`onSubmit`	`(value: string, attachments?: Attachment[]) => void`	—	Callback with entered text and optional attachments.
`placeholder`	`string`	`"Type a message..."`	Placeholder when input is empty.
`disabled`	`boolean`	`false`	Disables input and send button.
`loading`	`boolean`	`false`	Shows loading spinner on send button.
`maxLines`	`number`	`6`	Maximum height in lines before scrolling.
`value`	`string`	—	Controlled input value.
`onChange`	`(value: string) => void`	—	Change callback for controlled usage.
`accept`	`string`	`"image/*,.pdf,.txt,.md,.json"`	Accepted file types for attachments.
`maxAttachments`	`number`	`5`	Maximum number of attachments allowed.

→Attachments have remove buttons with accessible labels.
→Send button disabled when empty; enter key is the primary action.
→No text contrast issues: input text uses --text-primary; placeholder uses --text-tertiary.