Forms

MentionInput

A text area that suggests people, tokens or components after @ or #.

import { MentionInput } from "@flinbu/seed";

People and tokens

Comment

Type @ to mention someone or # to link a token. ⌘ Enter sends.

import { Field, MentionInput } from "@flinbu/seed";

<div className="w-full max-w-md">
  <Field label="Comment" hint="Type @ to mention someone or # to link a token. ⌘ Enter sends.">
    <MentionInput sources={{ "@": PEOPLE, "#": TOKENS }} placeholder="Leave a comment" defaultValue="Can you check the hover state on " />
  </Field>
</div>

Use it for

Comments and prompts.

Props

Prop	Type	Default	Description
`sources`	`Record<string, MentionItem[]>`	–	Trigger to items: { '@': people, '#': tokens }.
`items`	`MentionItem[]`	–	One source on @.
`onMention`	`(item, trigger) => void`	–	After inserting.
`onSubmit`	`(value) => void`	–	⌘ or Ctrl + Enter.

Accessibility

Suggestions are a listbox linked with aria-activedescendant; arrows move, Enter or Tab inserts, Escape closes.