Black Friday Is Here · 40% OFF!
Get Unlimited for $179

The Changelog

What's new around here?

Succinct and informative updates about Flux.
November 24, 2025

Composer

Version ^2.7.1
Composer component with action buttons and placeholder text
AI is everywhere, and chat interfaces are the new norm. We figured it was time Flux had a proper message input built for exactly this.
Meet Composer, a configurable message input with support for action buttons and rich text. Let's take a look.
Copy to clipboard
<flux:composer wire:model="prompt" placeholder="How can I help you today?">    <x-slot name="actionsLeading">        <flux:button size="sm" variant="subtle" icon="paper-clip" />    </x-slot>    <x-slot name="actionsTrailing">        <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />    </x-slot></flux:composer>

Two layouts

Composer component displayed as a single-line inline field
By default, action buttons sit below the input in their own row. Add the inline prop to place them alongside the input for a more compact look—great for single-line prompts.
Copy to clipboard
<flux:composer inline rows="1" ...>    ...</flux:composer>

Rich text

Composer component using a rich text editor instead of a textarea
Need formatting? Swap out the default textarea for a full rich text editor by passing an editor component to the input slot.
Copy to clipboard
<flux:composer wire:model="prompt" rows="3" ...>    <x-slot name="input">        <flux:editor variant="borderless" toolbar="bold italic bullet ordered | link" />    </x-slot>    ...</flux:composer>

Submit behavior

By default, pressing Cmd/Ctrl + Enter submits the form. For a chat-style experience where Enter sends immediately, just add submit="enter".
Copy to clipboard
<flux:composer submit="enter" ...>    ...</flux:composer>

Height control

Set the initial height with rows and let it grow with max-rows. The input auto-expands as users type, then becomes scrollable.
Copy to clipboard
<flux:composer rows="4" max-rows="8" ...>    ...</flux:composer>

Accessibility

And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper aria-labels so that screen readers can use it just as well.

Check out the Composer documentation for more examples and the full API reference.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie