Chat Input

An auto-resizing textarea with a send or stop button, designed for AI chat interfaces.

ChatInput is a controlled textarea that auto-resizes as the user types, submits on Enter, and switches to a stop button during streaming. It is a 'use client' component.

Streaming state

When isStreaming={true}, the textarea is disabled and the send button becomes a stop icon. Wire onStop to cancel the in-flight request.

Disabled

Use disabled to lock the input when a conversation has ended or the user lacks permissions.

Props

Prop	Type	Default	Description
`placeholder`	`string`	`"Message..."`	Textarea placeholder
`onSubmit`	`(value: string) => void`	—	Called with trimmed text on submit
`onStop`	`() => void`	—	Called when the stop button is clicked during streaming
`isStreaming`	`boolean`	`false`	Shows stop button and disables textarea
`disabled`	`boolean`	`false`	Fully disables the input
`actions`	`React.ReactNode`	—	Extra elements rendered between textarea and send button
`className`	`string`	—	Additional class names on the outer wrapper

Keyboard shortcuts

Key	Action
`Enter`	Submit the message
`Shift + Enter`	Insert a newline
`Escape`	Clear the input

Source

packages/ui/src/chat-input.tsx — copy into components/ui/chat-input.tsx in your project.