@lion/ui/docs/components/input-tel/overview.md

A package of extendable web components

---
title: 'Input Tel: Overview'
parts:
  - Input Tel
  - Overview
eleventyNavigation:
  key: 'Input Tel: Overview'
  order: 10
  parent: Input Tel
  title: Overview
---

# Input Tel: Overview

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

```js script
import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from 'lit/directives/ref.js';

import { PhoneUtilManager } from '@lion/ui/input-tel.js';
import '@lion/ui/define/lion-input-tel.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
```

```js preview-story
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](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/components/input/overview.md)
- 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](https://en.wikipedia.org/wiki/E.164) as modelValue
- Uses [awesome-phonenumber](https://www.npmjs.com/package/awesome-phonenumber) (a performant, concise version of [google-lib-phonenumber](https://www.npmjs.com/package/google-libphonenumber)):
  - 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

```bash
npm i --save @lion/ui
```

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