blatui

Components

Mention Input

A textarea that surfaces a suggestion list when you type @ to insert a mention.

php artisan blatui:add mention-input

Tip: type @ to mention someone.

{{-- Type "@" anywhere in the field to surface the people list, then arrow + Enter to insert. --}}
<div class="w-full max-w-md space-y-2">
    <x-ui.label for="mention-comment">Comment</x-ui.label>
    <x-ui.mention-input
        id="mention-comment"
        name="comment"
        placeholder="Type @ to mention a teammate…"
        :mentions="[
            ['value' => 'ada', 'label' => 'Ada Lovelace', 'sub' => 'Engineering'],
            ['value' => 'grace', 'label' => 'Grace Hopper', 'sub' => 'Compilers'],
            ['value' => 'alan', 'label' => 'Alan Turing', 'sub' => 'Research'],
            ['value' => 'katherine', 'label' => 'Katherine Johnson', 'sub' => 'Orbital Mechanics'],
            ['value' => 'linus', 'label' => 'Linus Torvalds', 'sub' => 'Kernel'],
            ['value' => 'margaret', 'label' => 'Margaret Hamilton', 'sub' => 'Flight Software'],
        ]"
    />
    <p class="text-muted-foreground text-xs">Tip: type <code class="font-mono">@</code> to mention someone.</p>
</div>

Prefilled

{{-- Starts with text that already contains a mention; keep typing @ to add more. --}}
<div class="w-full max-w-md space-y-2">
    <x-ui.label for="mention-reply">Reply</x-ui.label>
    <x-ui.mention-input
        id="mention-reply"
        name="reply"
        rows="4"
        value="Thanks @grace for the review — pinging @alan to take a final look."
        placeholder="Type @ to mention a teammate…"
        :mentions="[
            'ada',
            'grace',
            'alan',
            'katherine',
            'linus',
            'margaret',
        ]"
    />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public string $message = '';

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.mention-input wire:model="message" :mentions="['sam', 'alex']" />

API Reference

Props, slots and exposed methods for <x-ui.mention-input>.

Props

Prop Type Default Description
mentions* array [] The people (or items) that can be mentioned. Accepts plain strings or associative arrays; each becomes a suggestion in the popup. See Each mention below.
name string — Form field name for the underlying textarea.
trigger string '@' Character that opens the suggestion popup when typed at the start of a word.
placeholder string 'Type @ to mention…' Placeholder text for the textarea while it is empty.
rows int 3 Initial visible row count of the textarea. It also auto-grows with content.
value string — Prefilled textarea content. May also be provided via the default slot.
id string — Id applied to the textarea, for pairing with an external label. A random id is generated when omitted.

* Required.

Each mention

Prop Type Default Description
value* string — The token inserted into the text after the trigger character (e.g. "@ada"). Falls back to label when omitted.
label* string — Display name shown in the suggestion list. Falls back to value when omitted.
sub string — Secondary line shown under the label (e.g. a team or role).
avatar string — Image URL for the avatar. When omitted, the first letter of the label is shown in a circle.

Slots

Slot Description
default Optional prefilled textarea content (alternative to the value attribute).