Input Tel: Overview

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

export const main = () => {
  loadDefaultFeedbackMessages();
  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/ui

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