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.
<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
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.
<flux:composer inline rows="1" ...> ...</flux:composer>
Rich text
Need formatting? Swap out the default textarea for a full rich text editor by passing an editor component to the input slot.
<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".
<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.
<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.