diseño×css×
HTML + CSSInputs
Input de etiquetas
Pulsa Enter para convertir una palabra en etiqueta; con su × o con borrar desaparece encogiéndose.
Ajustes
16px
1x
Código
<div class="uv-in2g2"><span class="tg">diseño<i>×</i></span><span class="tg">css<i>×</i></span><input placeholder="Añade y pulsa Enter"></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.
Más en Inputs
Dónde usarlo
Un campo de etiquetas encaja donde se añaden varias cosas cortas: las habilidades de un perfil de empleo, las palabras clave de un post o los ingredientes que quieres evitar en una web de recetas. Cada etiqueta entra como una pastilla de color y se encoge al quitarla. Un input de tags en HTML, CSS y algo de JavaScript.
En esta versión solo Enter crea etiquetas, las comas no, así que indícalo en el placeholder como hace la demo. Si detrás hay una lista cerrada de opciones, unas sugerencias ayudarán más que escribir libremente.