Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA textarea that suggests people, tags or channels after a trigger character such as @ or #, tracks inserted mentions as ranges and highlights them.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for comments, chat and notes where people refer to others or to records. Use SlashInput for commands rather than references.
A Mention is { trigger, id, label, start, end }, where start and end are string indexes. Mentions move with the text when you type before them and are dropped when you edit inside them, so the list stays true to what is on screen.
| Prop | Type | Default | Description |
|---|---|---|---|
triggers | { char; items; label? }[] | [{ char: "@", items: [] }] | items is a list or a function of the typed text (may be async). |
value / defaultValue | string | "" | The text, controlled or initial. |
onValueChange | (value: string, mentions: Mention[]) => void | - | Runs on every change with the tracked mentions. |
maxSuggestions | number | 6 | Most options shown. |
rows | number | 4 | Textarea rows. |
...textarea props | ComponentProps<'textarea'> | - | Everything else goes to the textarea. |
The textarea has role=combobox with aria-expanded, aria-controls and aria-activedescendant; the popup is a listbox named by the trigger's label. A trigger only opens when it follows a space or the start of the text, so email addresses do not open the list. The popup is placed under the line being typed and starts at the inline-start edge, so it works in right-to-left text.