Escribe @ y elige con las flechas y Enter

HTML + CSSInputs

Comentario con menciones

Escribe una arroba y aparece la lista de personas; la mención elegida queda resaltada dentro del propio texto.

Ajustes

16px
1x

Código

<div class="uvq06-mn"><label for="uvq06-mn-in" class="lb">Comentario</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="Escribe @ para mencionar"></textarea><ul id="uvq06-mn-ls" role="listbox" aria-label="Personas" 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>Diseño</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>Producto</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>Desarrollo</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>Ventas</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">Escribe @ y elige con las flechas y Enter</p></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Inputs

Ver todos: Inputs

Dónde usarlo

Un campo de comentario que se comporta como los de las herramientas de equipo. Al escribir @ se abre un combobox accesible con avatares y puestos, que se filtra mientras escribes y se maneja con flechas, Enter o Tab. Los nombres elegidos quedan resaltados dentro del área de texto gracias a una capa espejo detrás del campo transparente, y la edición nativa sigue funcionando.

Cambia la lista de personas por tu equipo y elige el color principal para el resaltado y el anillo de foco. Encaja en comentarios de tareas, notas de revisión de código y editores de chat, y el truco del espejo sirve para hashtags o variables con otro patrón.