Prompt Input
Work in ProgressInput 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.
Note: This component is currently under development. Some features may not work as expected. We're actively working on improvements and will update the documentation once stable.
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 Support
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 (العربية)
Use Cases
AI chat input fields
Search-as-you-type interfaces
Command input with auto-complete
Code generation prompts
Best Practices
Do
- ✓ Show a clear send/submit button
- ✓ Support multi-line input with auto-grow
- ✓ Disable send while a response is being generated
Don't
- ✗ Don't clear input on error — preserve user's text
- ✗ Don't submit on Enter if multi-line is expected
- ✗ Don't hide the input during response generation