Emoji Picker
A native text input with an emoji panel — search, categories, recent picks, and insert-at-cursor. Also usable as a button trigger for composers.
Basic Usage
Opens a panel next to a native text input. Selecting an emoji inserts it at the caret.
<neura::emoji-picker name="reaction" />With Label & Livewire
Bind with
wire:model
. The value stays a plain string — native emoji characters.
Pick an emoji or type one
Current: 🎉
<neura::emoji-picker
wire:model.live="mood"
label="Mood"
hint="Pick an emoji or type one"
/>Button Variant
Use
variant="button"
as a compact trigger. Point
for
at another input/textarea id to insert there, or listen for
emoji-select
.
Message
<textarea id="message" rows="3"></textarea>
<neura::emoji-picker
variant="button"
for="message"
popup-align="right"
:close-on-select="false"
/>In a Composer
Drop the button variant into the composer
tools
slot and pass the composer
id
to
for
.
↵ send · ⇧↵ line
<neura::composer id="message">
<x-slot:tools>
<neura::button variant="ghost" size="sm" icon="paper-clip" />
<neura::emoji-picker variant="button" for="message" />
</x-slot:tools>
<x-slot:submit>
<neura::button size="sm">Send</neura::button>
</x-slot:submit>
</neura::composer>