Logo
Neura UI
Loading…
Logo
All pages 86

Composer

A polished message field for chat and AI prompts — auto-growing textarea, toolbar slots, and keyboard submit.

Basic Usage

Split tools and submit into dedicated slots for a clean toolbar. Press Enter to submit ( Shift + Enter for a new line).
blade 
<neura::composer wire:model="message" placeholder="Ask anything…">
    <x-slot:tools>
        <neura::button variant="ghost" size="sm" icon="paper-clip" />
        <neura::emoji-picker variant="button" for="…" />
    </x-slot:tools>
    <x-slot:submit>
        <neura::button size="sm" icon="paper-airplane" squared aria-label="Send" />
    </x-slot:submit>
</neura::composer>

With Header

Use the header slot for attachments, context chips, or file previews.
blade 
<neura::composer>
    <x-slot:header>…attachments…</x-slot:header>
    <x-slot:tools>…</x-slot:tools>
    <x-slot:submit>…</x-slot:submit>
</neura::composer>

Inline Layout

Compact single-row layout — ideal for comment threads and quick replies.
blade 
<neura::composer inline rows="1" placeholder="Write a reply…">
    <x-slot:tools>
        <neura::button variant="ghost" size="sm" icon="paper-clip" />
    </x-slot:tools>
    <x-slot:submit>
        <neura::button size="sm" icon="paper-airplane" squared />
    </x-slot:submit>
</neura::composer>

Height Configuration

Control growth with rows and maxRows . Disable Enter-to-send with :submit-on-enter="false" when you need multi-line drafts.
blade 
<neura::composer
    rows="3"
    maxRows="10"
    :submit-on-enter="false"
    placeholder="Write a longer note…"
>
    <x-slot:submit>
        <neura::button size="sm" icon="paper-airplane" squared />
    </x-slot:submit>
</neura::composer>

Legacy Actions Slot

The actions slot still works for a single custom toolbar row.
blade 
<neura::composer>
    <x-slot:actions>
        <div class="flex gap-1">…tools…</div>
        <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 rows
maxRows number 8 Max rows before scroll
inline boolean false Single-row layout
id string null Textarea id (for emoji-picker for)
submitOnEnter boolean true Enter dispatches composer-submit
autofocus boolean false Focus on mount
disabled boolean false Disable the field
Slots: header , tools , submit , actions (legacy).