Navigation & Structure
Morphing Input Chat
Morphing chat input with dynamic icon transitions. Features attachment buttons that morph into send button when text is entered, with smooth animations.
navigation-structurechatinputmorphinganimationinteractive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Ask AI anything..." | Placeholder text for the input field. |
onSend | (message: string) => void | undefined | Callback function called when message is sent. |
showLeftIcon | boolean | true | Whether to display the left icon button. |
showAttachments | boolean | true | Whether to show attachment buttons when input is empty. |
className | string | undefined | Additional CSS classes for custom styling. |
value | string | undefined | Controlled input value. |
onChange | (value: string) => void | undefined | Callback function called when input value changes. |