Docs
Chat Input
Chat Input
A chat input component that autoresizes to fit the content and features a submit button.
A versatile chat input component that comes pre-styled with a modern look. It features automatic height adjustment based on content, a submit button, and smart keyboard handling. Press Enter to submit your message or Shift+Enter to add a new line. The component is composed of a textarea and a submit button, which can be customized or used individually.
Installation
pnpm dlx shadcn@latest add https://simple-ai.dev/r/chat-input.json
Usage
import { ChatInput, ChatInputTextArea, ChatInputSubmit } from "@/components/ui/chat-input"<ChatInput variant="default">
<ChatInputTextArea placeholder="Type a message..." />
<ChatInputSubmit />
</ChatInput>Props
ChatInput
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "unstyled" | "default" | The visual style variant of the chat input |
| value | string | - | The controlled value of the textarea |
| onChange | function | - | Callback when the textarea value changes |
| onSubmit | function | - | Callback when the message is submitted |
| loading | boolean | false | Whether the input is in a loading state |
| onStop | function | - | Callback to stop an ongoing action (shown when loading) |
| rows | number | 1 | Initial number of rows to display in the textarea |