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`
    <lion-input-tel
      .modelValue="${'+639921343959'}"
      live-format
      label="Telephone number"
      name="phoneNumber"
    ></lion-input-tel>
    <h-output
      .show="${[
        'activeRegion',
        {
          name: 'all or allowed regions',
          processor: el => JSON.stringify(el._allowedOrAllRegions),
        },
        'modelValue',
      ]}" 'modelValue']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};

Features

  • 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

Installation

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