Introduce tu IBAN
IBAN input with check digits
Groups the IBAN in fours on security paper, recognises the country and verifies the check digits once you finish.
Settings
Code
<div class="uvq06-ib"><label for="uvq06-ib-in" class="lb">Bank account (IBAN)</label><div class="fd"><span class="cc" aria-hidden="true">··</span><input id="uvq06-ib-in" autocomplete="off" spellcheck="false" maxlength="42" placeholder="ES00 0000 0000 0000 0000 0000" aria-describedby="uvq06-ib-st"><span class="ck" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></div><div class="gr" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i hidden></i><i hidden></i><i hidden></i></div><p class="st" id="uvq06-ib-st" aria-live="polite">Enter your IBAN</p></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
A bank account field that does the boring work for you. It strips spaces and lowercase, groups characters in fours while keeping the caret in place, reads the country code to know the expected length and fills a segmented bar group by group. At the end it runs the official mod 97 check and shows a tick or a clear error.
The guilloche pattern behind the text uses the main color at low strength, like the background of a cheque. Use it in payroll, direct debit and checkout forms, and add more countries to the length table in the script if you need them.