Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Input Tel: Overview

Input field for entering phone numbers, including validation, formatting and mobile keyboard support.

export const main = () => {
  return html`
      label="Telephone number"
          name: 'all or allowed regions',
          processor: el => JSON.stringify(el._allowedOrAllRegions),
      ]}" 'modelValue']}"


  • Extends our input
  • Shows a mobile telephone keypad on mobile (by having a native <input inputmode="tel"> inside)
  • Can be configured with a list of allowed region codes
  • Will be preconfigured with region derived from locale
  • Has the e164 standard format as modelValue
  • Uses awesome-phonenumber (a performant, concise version of google-lib-phonenumber):
    • Formats phone numbers, based on region code
    • Validates phone numbers, based on region code
  • Lazy loads awesome-phonenumber, so that the first paint of this component will be brought to your screen as quick as possible


npm i --save @lion/ui
import { LionInputTel } from '@lion/ui/input-tel.js';
// or
import '@lion/ui/define/lion-input-tel.js';