Card number input with live preview
As you type the number, the card above shows it, groups digits in fours and detects the brand.
Settings
Code
<div class="uv-icd"><div class="cd" aria-hidden="true"><span class="ch"></span><span class="br">Card</span><span class="nb">•••• •••• •••• ••••</span><span class="nm">Lucía Martín</span></div><label for="uv-icd-in">Card number</label><div class="fd"><input id="uv-icd-in" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456" maxlength="19"><span class="tg">Card</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Payment forms feel safer when people see what they are typing on something that looks like their card. This field formats the number in groups of four as you type, mirrors it on a glossy card preview with chip and name, and detects Visa, Mastercard or Amex from the first digits, changing the card colors and the brand tag.
Focusing the field tilts the card slightly and sweeps a light across it. The input uses the numeric keyboard on phones and the cc-number autocomplete hint, so password managers and browsers can fill it in.