Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bwrigley's avatar

Adding chips inside editable div

I am trying to design an input textbox similar to WA/FB that allows users to add #tags and/or mentions to their post.

So far I have an TextInput component with a contenteditable div. When the user begins to type a tag or a mention I have an AutoComplete component that fires off an Algolia search and suggests tags/mentions. The User selects one and it's added to the message inline. All good.

I would much rather these mentions/tags were inserted inline as chips with formatting and easily deleted with a single backspace etc.

I'm scratching my head to come up with a good design for this that doesn't require too much ugly post-processing of the message, and I expect there are already great designs for this, I'm just not finding any good examples in my searching.

I just wondered if anyone has seen or built any good examples thy might share?

Thanks in advance!

0 likes
0 replies

Please or to participate in this conversation.