Mention input

InstallationCopy Anchor Link

nub add @gpuixui/components

UsageCopy Anchor Link

import {
  MentionInput,
  MentionInputItem,
  MentionInputList,
} from "@gpuixui/components";

<MentionInput
  label="Comment"
  value={comment}
  onValueChange={setComment}
  onMention={(name) => notify(name)}
>
  <MentionInputList>
    {people.map((person) => (
      <MentionInputItem key={person} value={person} />
    ))}
  </MentionInputList>
</MentionInput>;

CompositionCopy Anchor Link

MentionInput
├── MentionInputList
│   └── MentionInputItem

APICopy Anchor Link

MotionCopy Anchor Link

The suggestion list enters and leaves on the house normal level: a fade plus 4px of travel out from the field's bottom edge. Closing the query — Escape or a selection — keeps the box painted for its exit window, carrying the rows the reader dismissed rather than re-ranking an empty query mid-fade, and the seam's leaving guard stops a ghost row taking the press while the row drops its own tab stop with the box. A list that only narrows to nothing is cut instead: the field is still open and a ghost of rows the query no longer matches would misreport the search. A field the caller disables cuts its list too, because the control refuses every route and there is no gesture to finish. MotionProvider preference="reduced" removes the journey: the box is gone in the frame it closes.

Edit this page on GitHubpackages/components/docs/mention-input.mdx