Input con línea inferior
Un campo mínimo con solo una línea debajo; al enfocarlo, una línea degradada crece desde el centro.
Ajustes
Código
<label class="uv-il"><input placeholder="Tu nombre"><i></i></label>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 input con subrayado deja la página limpia, por eso gusta en formularios cortos y elegantes: el campo «Tu nombre» de una confirmación de boda, el contacto del portfolio de un fotógrafo o el email de la newsletter de un restaurante. No hay caja, solo una línea. Al hacer clic, una línea de color se abre desde el centro.
Hay quien no reconoce una sola línea como campo, así que mantén estos formularios breves y evidentes. El placeholder desaparece en cuanto se escribe; si hay más de dos campos, añade una etiqueta visible encima de cada uno.