Prompt Input
Input component for sending chat messages with support for attachments, voice input, and auto-resize. Features smart textarea that grows with content and keyboard shortcuts for better UX.
Preview
Installation
Usage
Examples
With Attachments and Voice
Loading State
Try sending a message to see the loading state for 2 seconds.
Controlled Component
Current value: (empty)
Props
| Name | Type | Default | Description |
|---|---|---|---|
onSend | (value: string) => void | — | Callback when send button is clicked or Enter is pressed |
isLoading | boolean | false | Whether the input is in loading state |
showAttachment | boolean | false | Show file attachment button |
showVoice | boolean | false | Show voice input button |
showCounter | boolean | false | Show character/token counter |
maxLength | number | — | Maximum characters allowed |
onAttachment | () => void | — | Callback when attachment button is clicked |
onVoice | () => void | — | Callback when voice button is clicked |
isRTL | boolean | false | Whether text direction is RTL |
placeholder | string | — | Placeholder text |
placeholderAr | string | — | Placeholder text in Arabic |
value | string | — | Controlled value |
onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | — | Change handler for controlled component |
Accessibility
Screen Reader
All action buttons include screen reader labels. The textarea has proper ARIA attributes and placeholder text that guides users.
Keyboard Navigation
- Enter: Send message
- Shift+Enter: New line
- Tab: Navigate to action buttons
Auto-resize
The textarea automatically expands as content grows, up to 200px maximum height, ensuring content remains visible without manual resizing.
RTL Considerations
The input automatically adapts to RTL layout. Action buttons move to the left side, and text direction changes. Set isRTL prop for RTL languages.
LTR (English)
RTL (العربية)
Related Components
Display chat messages from users and AI
Loading state for AI responses
Action buttons for chat messages