Reference
Mentions
The vessel: the candidates themselves as a floating card. The anchor is virtual — a live rectangle off the host's field — so a host keeps its own anatomy (the textarea rides where the host puts it) and the vessel still points at the right place. Shares the detection state with the host through `useMentions`.
Option · Popup · Root · Textarea
#MentionsVessel
The vessel: the candidates themselves as a floating card. The anchor
is virtual — a live rectangle off the host's field — so a host keeps
its own anatomy (the textarea rides where the host puts it) and the
vessel still points at the right place. Shares the detection state
with the host through useMentions.
| Prop | Type | Default | Description |
|---|---|---|---|
open | Boolean | false | — |
matches | Array as PropType<MentionEntry[]> | () => [] | — |
active | Number | 0 | — |
anchor | Object as PropType<HTMLTextAreaElement | null> | null | — |
size | String as PropType<"sm" | "md" | "lg"> | "md" | The host field's rung, so the rows keep the field's register. |
| Event | Payload |
|---|---|
insert | (_entry: MentionEntry) => true |
update:active | (_index: number) => true |
update:open | (_open: boolean) => true |
#Mentions
@-mentions: a plain textarea that, when the text before the caret ends
with the trigger character followed by a token, offers the matching
candidates in a small anchored vessel; choosing one replaces the token
with trigger + label and hands the whole text back through
update:modelValue. Arrows move, Enter inserts, Escape dismisses.
The field is the shared Field.Textarea — field wiring (label ids,
the invalid state, autoresize) rides on it for free — and the vessel
anchors to the field as a whole (popover machinery), not to the caret
coordinates; caret-precise positioning would need a second
positioning system for no practical gain at typical field sizes.
Composers that keep their own field anatomy (the AI prompt input)
skip this shell and wire useMentions plus MentionsVessel
themselves.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array as PropType<MentionEntry[]> | () => [] | — |
modelValue | String | undefined | — |
trigger | String | "@" | — |
placeholder | String | undefined | — |
autoresize | Boolean | false | — |
invalid | Boolean | false | — |
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the control-height ladder for the resting field. |