Mention input
An auto-growing textarea with @mentions and #channels: a caret-anchored suggestion list with avatars and keyboard navigation, mentions shown as chips, atomic deletion and structured markup output.
Preview
LNT-226 · Retry webhook deliveries
- Malik Haddad 10:12
Webhook retries are live behind a flag. #launch can flip it once @Noor Lindqvist signs off.
- Noor Lindqvist 10:31
Looks good from support. @Priya Raman can we update the billing copy too?
⌘ Enter to post
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| people | { id, name, detail? }[] | — | Suggested after @, matched by word start. |
| channels | { id, name, detail? }[] | [] | Suggested after #; leave empty to turn # off. |
| defaultValue | string | "" | Initial markup, e.g. "Hi @[Priya Raman](user:priya)". |
| onValueChange | (value: { text, markup, mentions }) => void | — | Structured value on every edit. |
| onSubmit | (value) => void | — | Called on Cmd/Ctrl+Enter. |
| placeholder | string | "Write a comment…" | Placeholder text. |
| maxRows | number | 8 | Rows it grows to before scrolling. |
| disabled | boolean | false | Dims and disables the box. |
| MentionText markup | string | — | Renders saved markup with mention chips. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.