- LMLucía MartínDiseño
- POPablo OrtegaProducto
- MRMarta RuizDesarrollo
- JSJorge SanzVentas
- NVNuria VidalMarketing
Escribe @ y elige con las flechas y Enter
Kommentarfeld mit Erwähnungen
Tippe ein At-Zeichen und eine Personenliste erscheint; die gewählte Erwähnung bleibt direkt im Text hervorgehoben.
Einstellungen
Code
<div class="uvq06-mn"><label for="uvq06-mn-in" class="lb">Kommentar</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="Tippe @ zum Erwähnen"></textarea><ul id="uvq06-mn-ls" role="listbox" aria-label="Personen" 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>Produkt</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>Entwicklung</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>Vertrieb</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">Tippe @ und wähle mit Pfeiltasten und Enter</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Ein Kommentarfeld, das sich wie in Team-Tools verhält. Ein @ öffnet eine barrierefreie Combobox mit Avataren und Rollen, die beim Tippen filtert und sich mit Pfeiltasten, Enter oder Tab steuern lässt. Gewählte Namen werden im Textfeld selbst hervorgehoben, über eine Spiegelebene hinter dem transparenten Feld, sodass natives Bearbeiten, Rückgängig und Rechtschreibprüfung weiter funktionieren.
Ersetze die Personenliste durch dein Team und wähle die Hauptfarbe für Markierung und Fokusring. Es passt zu Aufgabenkommentaren, Code-Review-Notizen und Chat-Eingaben, und der Spiegeltrick funktioniert mit einem anderen Muster auch für Hashtags oder Variablen.