Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Input Iban: Overview

A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).

export const main = () => {
  return html` <lion-input-iban label="Account" name="account"></lion-input-iban> `;


  • Based on our input
  • Default label in different languages
  • Makes use of IBAN specific validate with corresponding error messages in different languages
    • IsIBAN (default)
    • IsCountryIBAN
  • Parses IBANs automatically
  • Formats IBANs automatically


npm i --save @lion/ui
import { LionInputIban } from '@lion/ui/input-iban.js';
// or
import '@lion/ui/define/lion-input-amount.js';