Tarjeta con vista previa
Mientras escribes el número, la tarjeta de arriba lo muestra, agrupa las cifras de cuatro en cuatro y detecta la marca.
Ajustes
Código
<div class="uv-icd"><div class="cd" aria-hidden="true"><span class="ch"></span><span class="br">Tarjeta</span><span class="nb">•••• •••• •••• ••••</span><span class="nm">Lucía Martín</span></div><label for="uv-icd-in">Número de tarjeta</label><div class="fd"><input id="uv-icd-in" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456" maxlength="19"><span class="tg">Tarjeta</span></div></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
Ver todos: InputsDónde usarlo
Los formularios de pago transmiten más confianza cuando se ve lo que escribes sobre algo parecido a tu tarjeta. Este campo agrupa el número de cuatro en cuatro mientras escribes, lo refleja en una tarjeta brillante con chip y nombre y detecta Visa, Mastercard o Amex por las primeras cifras, cambiando los colores y la etiqueta de marca.
Al enfocar, la tarjeta se inclina un poco y un reflejo la cruza. El campo abre el teclado numérico en el móvil y usa autocomplete cc-number para que gestores de contraseñas y navegadores la rellenen.