# Mention
> `@`-style mention picker for `
```
## Custom trigger
`triggers` accepts any character (or set of characters). Use `#` for tags, `:` for emoji, etc.
```angular-html
```
## Types
Data shapes used by the inputs and outputs above.
```angular-ts
interface WrMentionItem {
label: string;
[key: string]: unknown;
}
```
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrMentionItem` | A mentionable entry — extend with any extra metadata. | `interface` | — |
| `label`required | Text inserted and shown in the panel. | `string` | — |
| `[key: string]` | Anything else your app needs back on (selected). | `unknown` | — |
## Accessibility
The field keeps its native `role=\`textbox\``— it holds prose, and the mention is a fragment inside it, not the field's value. It is deliberately not a`combobox`: that role is disallowed on`\
- Ada Lovelace
- Grace Hopper
```
## API
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrMentionItems` | Items to filter against the typed query. | `readonly T[]` | `[]` |
| `triggers` | Trigger characters that open the panel. | `readonly string[]` | `['@']` |
| `displayWith` | Maps an item to its display label. | `(item: T) => string` | ```item.label``` |
| `valueWith` | Returns the text to insert into the textarea on commit. Receives the picked item and the trigger char. | `((item: T, trigger: string) => string) \| null` | ```${trigger}${displayWith(item)}``` |
| `filterWith` | Custom filter. | `((query: string, item: T) => boolean) \| null` | ``case-insensitive `includes` over `displayWith(item)`.`` |
| `maxResults` | Maximum number of items shown in the panel. | `number` | `8` |
| `(wrMentionSelected)` | Emits the selected item, trigger, and query whenever the user commits. | `WrMentionCommit` | — |