Composer
A configurable message input with support for action buttons and rich text. Ideal for chat interfaces and AI prompts.
Basic Usage
A simple composer with a send button.
<neura::composer wire:model="message">
<x-slot:actions>
<div class="flex gap-2">
<neura::button variant="ghost" size="sm" icon="paper-clip" />
<neura::button variant="ghost" size="sm" icon="face-smile" />
</div>
<neura::button size="sm">Send</neura::button>
</x-slot:actions>
</neura::composer>With Header
Display file previews or other content above the input area using the header slot.
<neura::composer>
<x-slot:header>
<div class="flex gap-2">
<img src="..." class="w-12 h-12 rounded-lg" />
</div>
</x-slot:header>
<x-slot:actions>
...
</x-slot:actions>
</neura::composer>Inline Layout
Place action buttons alongside the input in a single row for a more compact layout.
<neura::composer inline rows="1">
<x-slot:actions>
<neura::button variant="ghost" size="sm" icon="paper-clip" />
<neura::button size="sm" icon="paper-airplane" />
</x-slot:actions>
</neura::composer>Height Configuration
Set the initial and maximum height of the input area using
rows and maxRows.
<neura::composer
rows="3"
maxRows="10"
placeholder="Type a long message..."
>
<x-slot:actions>
<neura::button size="sm">Send</neura::button>
</x-slot:actions>
</neura::composer>Properties
| Property | Type | Default | Description |
|---|---|---|---|
| placeholder | string | 'Type a message...' | Placeholder text |
| rows | number | 1 | Initial number of rows |
| maxRows | number | 8 | Maximum number of rows before scrolling |
| inline | boolean | false | Use inline layout for actions |
| autofocus | boolean | false | Autofocus the input |
| disabled | boolean | false | Disable the input |