Skip to main content
The @-mention / autocomplete picker that appears inside comment composers (and the mention chips it produces). You customize the data (who/what is mentionable), the layout (option rows, groups, empty state), and the chips.

​
Components

Most customers don’t mount the primitives directly: autocomplete renders inside the comment composer.

​
Config props

Customize the data (the most common need): these props live on <VeltComments>:
These props do not exist: showMentionGroups, customGroups, atHere/showAtHere. Use the real names above.
Supply the contacts/data via hooks (headless config):
  • Contacts: useContactUtils() → ContactElement: updateContactList(userContacts, config?), updateOrgList(...), enableAtHere()/setAtHereLabel(), getContactList(). Read with useContactList().
  • Custom (non-contact) items: useAutocompleteUtils() → AutocompleteElement.create({ hotkey, type: 'custom'|'contact'|'group', data, groups? }): combine with customAutocompleteSearch.

​
CSS: stateful classes

(Override with !important, R9b.)
Chip classes are styled in a global stylesheet: override them globally, not inside a component scope.

​
Wireframes: slot trees + tokens

.Description is the one slot with an input prop (field). Read tokens with {componentConfig.<x>}: flattenedItems (empty when length === 0), groups, expandMentionGroups, customAutocompleteSearch; per-row option (.name/.email/.description/.group.name/.group.userCount), chip (.label).

​
Headless hooks

​
Limitations

customAutocompleteSearch only flips the mode: you must also feed data. The panel switches to virtual scroll past ~6 items. Some option/group types referenced in tokens are internal shapes (not in the public types): rely on the documented fields above and inspect at runtime if unsure.