# Composer

Published: November 24, 2025

Version: ^2.7.1

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_7_0_composer_hero.png" alt="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.

```blade
<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

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_7_0_composer_inline.png" alt="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.

```blade
<flux:composer inline rows="1" ...>
    ...
</flux:composer>
```

## Rich text

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_7_0_composer_rich_text.png" alt="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.

```blade
<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 <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> + <kbd>Enter</kbd> submits the form. For a chat-style experience where <kbd>Enter</kbd> sends immediately, just add `submit="enter"`.

```blade
<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.

```blade
<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](https://fluxui.dev/components/composer) for more examples and the full API reference.