- LMLucía MartínDiseño
- POPablo OrtegaProducto
- MRMarta RuizDesarrollo
- JSJorge SanzVentas
- NVNuria VidalMarketing
Escribe @ y elige con las flechas y Enter
Comment box with mentions
Type an at sign and a list of people pops up; the chosen mention stays highlighted right inside the text.
Settings
Code
<div class="uvq06-mn"><label for="uvq06-mn-in" class="lb">Comment</label><div class="fd"><div class="bk" aria-hidden="true"></div><textarea id="uvq06-mn-in" rows="3" role="combobox" aria-expanded="false" aria-controls="uvq06-mn-ls" aria-autocomplete="list" placeholder="Type @ to mention"></textarea><ul id="uvq06-mn-ls" role="listbox" aria-label="People" hidden><li role="option" id="uvq06-mn-o0" data-n="Lucía Martín" aria-selected="false"><i style="--a:#f97316">LM</i><span>Lucía Martín</span><em>Design</em></li><li role="option" id="uvq06-mn-o1" data-n="Pablo Ortega" aria-selected="false"><i style="--a:#0ea5e9">PO</i><span>Pablo Ortega</span><em>Product</em></li><li role="option" id="uvq06-mn-o2" data-n="Marta Ruiz" aria-selected="false"><i style="--a:#16a34a">MR</i><span>Marta Ruiz</span><em>Development</em></li><li role="option" id="uvq06-mn-o3" data-n="Jorge Sanz" aria-selected="false"><i style="--a:#a855f7">JS</i><span>Jorge Sanz</span><em>Sales</em></li><li role="option" id="uvq06-mn-o4" data-n="Nuria Vidal" aria-selected="false"><i style="--a:#e11d48">NV</i><span>Nuria Vidal</span><em>Marketing</em></li></ul></div><p class="ht">Type @ and pick with the arrows and Enter</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A comment field that behaves like the ones in team tools. Typing @ opens an accessible combobox with avatars and roles, filtered as you type and driven by the arrow keys, Enter or Tab. Picked names are highlighted inside the text area itself with a mirror layer behind the transparent field, so the native editing, undo and spellcheck keep working.
Replace the people list with your own team and set the main color for the highlight and the focus ring. It fits task comments, code review notes and chat composers, and the mirror trick works for hashtags or variables with a different pattern.