Neura UI

Loading…

Logo
Neura UI
All pages 99

Mention input

A comment field where @people and #channels stay one token, with suggestions beside the caret.

Comment

Type @ for a person or # for a channel. The arrows move through the list, Enter or Tab inserts the highlight as one token, and Backspace beside a token removes the whole name.
With submit-on-enter, Enter posts the comment and Shift+Enter adds a line. Size, variant, color, and rounded follow the mention-input config.
blade

No matches

Enter to post 

<neura::mention-input
    label="Comment"
    placeholder="Write a comment, @ to mention"
    :people="[
        ['id' => 'u1', 'name' => 'Maya Chen', 'role' => 'Design lead'],
        ['id' => 'u2', 'name' => 'Theo Park', 'role' => 'Engineer'],
    ]"
    :channels="[
        ['id' => 'c1', 'name' => 'launch', 'description' => 'Release planning', 'members' => 14],
    ]"
    submit-on-enter
/>

Tokens

A mention is the visible name plus a range in the text. The field posts <@id> for a person and <#id> for a channel. Pass value and mentions when the comment should open with tokens already in place.
blade

No matches

<neura::mention-input
    label="Reply"
    value="Thanks @Maya Chen for the #launch notes"
    :mentions="[
        ['kind' => 'person', 'id' => 'u1', 'label' => 'Maya Chen', 'start' => 7, 'end' => 17],
        ['kind' => 'channel', 'id' => 'c1', 'label' => 'launch', 'start' => 26, 'end' => 33],
    ]"
    :people="[
        ['id' => 'u1', 'name' => 'Maya Chen', 'role' => 'Design lead'],
    ]"
    :channels="[
        ['id' => 'c1', 'name' => 'launch', 'description' => 'Release planning'],
    ]"
/>

Props

Prop Type Default Description
label string null Text above the field
people array [] People suggested after @. Each item has id and name
channels array [] Channels suggested after #. Each item has id and name
value string '' Initial text, including @name and #name tokens
mentions array [] Token ranges: kind, id, label, start, end
submit-on-enter bool false Enter posts and dispatches mention-submit
size string config xs, sm, md, lg, or xl
variant string config solid, dark, outline, soft, or ghost