Skip to content

Overview

The <x-aura::composer> component provides a chat-style message input with an auto-resizing textarea, a send button, and optional prepend/append slots for attachments or actions. The textarea grows as the user types (up to a configurable max rows) and supports submit-on-Enter. It dispatches an aura:composer-submit event with the message value and integrates with Livewire via wire:model.

Pro component -- requires bluestarsystem/aura-ui-pro.

Use composer for:

  • Chat and messaging interfaces
  • Comment and reply forms
  • AI prompt inputs
  • Feedback or support widgets

Basic Usage

<x-aura::composer placeholder="Type a message..." />

Props

Prop Type Default Description
placeholder string 'Type a message...' Placeholder text for the textarea
maxRows int 6 Maximum number of rows the textarea can expand to before scrolling
submitOnEnter bool true Submit the message when Enter is pressed (Shift+Enter for new line)
disabled bool false Disable the input and send button

Slots

Slot Description
prepend Content displayed before the textarea (e.g., attachment button)
append Content displayed after the send button (e.g., emoji picker)

Events

Event Payload Description
aura:composer-submit { value: string } Dispatched when the user submits the message (Enter key or send button click)

Variants / Examples

With Livewire

<x-aura::composer wire:model="message" placeholder="Write a reply..." />

Listen for the submit event in your Livewire component:

<div x-on:aura:composer-submit.window="$wire.sendMessage($event.detail.value)">
    <x-aura::composer placeholder="Type your message..." />
</div>

With Prepend and Append Slots

<x-aura::composer placeholder="Message...">
    <x-slot:prepend>
        <button type="button" class="p-1.5 text-gray-400 hover:text-gray-600 rounded">
            <x-aura::icon name="paperclip" size="sm" />
        </button>
    </x-slot:prepend>

    <x-slot:append>
        <button type="button" class="p-1.5 text-gray-400 hover:text-gray-600 rounded">
            <x-aura::icon name="smile" size="sm" />
        </button>
    </x-slot:append>
</x-aura::composer>

Disabled State

<x-aura::composer disabled placeholder="Chat is currently unavailable." />

No Submit on Enter

<x-aura::composer :submitOnEnter="false" placeholder="Press the send button to submit..." />

Accessibility

  • The send button includes aria-label="Send" for screen reader identification.
  • The send button is dynamically disabled (via x-bind:disabled) when the input is empty, preventing blank submissions.
  • When submitOnEnter is enabled, Shift+Enter inserts a new line while Enter triggers submission, following common messaging conventions.
  • The textarea receives focus ring styling via focus-within on the wrapper, providing clear focus indication.