diff --git a/.changeset/rare-panthers-crash.md b/.changeset/rare-panthers-crash.md
new file mode 100644
index 000000000..732c593b1
--- /dev/null
+++ b/.changeset/rare-panthers-crash.md
@@ -0,0 +1,5 @@
+---
+'@lion/input-tel': minor
+---
+
+New component "LionInputTel"
diff --git a/docs/components/inputs/input-tel/features.md b/docs/components/inputs/input-tel/features.md
new file mode 100644
index 000000000..483e36624
--- /dev/null
+++ b/docs/components/inputs/input-tel/features.md
@@ -0,0 +1,254 @@
+# Inputs >> Input Tel >> Features ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { ref, createRef } from '@lion/core';
+import { Unparseable } from '@lion/form-core';
+import { localize } from '@lion/localize';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
+import { PhoneUtilManager } from '@lion/input-tel';
+import '@lion/input-tel/define';
+import './src/h-region-code-table.js';
+import '../../../docs/systems/form/assets/h-output.js';
+```
+
+## Regions: some context
+
+Say we have the following telephone number from Madrid, Spain: `+34919930432`.
+
+It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
+Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
+
+The table below lists all possible regions worldwide. When [allowed regions](#allowed-regions) are not configured,
+all of them will be supported as values of Input Tel.
+
+```js story
+export const regionCodesTable = () => html``;
+```
+
+### Active region
+
+The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
+should be applied. It is dependent on the following factors:
+
+- [allowed regions](#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+ [.allowedRegions has only one entry](#restrict-to-one-region), .activeRegion will always be this value.
+- the modelValue or viewValue: once it contains sufficient info to derive its region code (and
+ the derived code is inside [allowed regions](#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](#allowed-regions) if configured)
+
+What follows from the list above is that .activeRegion can change dynamically, after a value
+change in the text box by the user (or when locales or allowed regions would be changed by the
+Application Developer).
+
+### How active region is computed
+
+The following heuristic will be applied:
+
+1. check for **allowed regions**: if one region defined in .allowedRegions, use it.
+2. check for **user input**: try to derive active region from user input
+3. check for **locale**: try to get the region from locale (`html[lang]` attribute)
+
+```js preview-story
+export const heuristic = () => {
+ const initialAllowedRegions = ['CN', 'ES'];
+ const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
+
+ const setDerivedActiveRegionScenario = (
+ scenarioToSet,
+ inputTel = inputTelRef.value,
+ output = outputRef.value,
+ ) => {
+ if (scenarioToSet === 'only-allowed-region') {
+ // activeRegion will be the top allowed region, which is 'NL'
+ inputTel.modelValue = undefined;
+ inputTel.allowedRegions = ['NL']; // activeRegion will always be the only option
+ output.innerText = '.activeRegion (NL) is only allowed region';
+ } else if (scenarioToSet === 'user-input') {
+ // activeRegion will be based on phone number => 'BE'
+ inputTel.allowedRegions = ['NL', 'BE', 'DE'];
+ inputTel.modelValue = '+3261234567'; // BE number
+ output.innerText = '.activeRegion (BE) is derived (since within allowedRegions)';
+ } else if (scenarioToSet === 'locale') {
+ localize.locale = 'en-GB';
+ // activeRegion will be `html[lang]`
+ inputTel.modelValue = undefined;
+ inputTel.allowedRegions = undefined;
+ output.innerText = `.activeRegion (${inputTel._langIso}) set to locale when inside allowed or all regions`;
+ } else {
+ output.innerText = '';
+ }
+ };
+ return html`
+
+
+
+
+ `;
+};
+```
+
+## Allowed regions
+
+`.allowedRegions` is an array of one or more region codes.
+Once it is configured, validation and formatting will be restricted to those
+values that are present in this list.
+
+> Note that for [InputTelDropdown](../input-tel-dropdown/index.md), only allowed regions will
+> be shown in the dropdown list.
+
+```js preview-story
+export const allowedRegions = () => html`
+
+
+`;
+```
+
+### Restrict to one region
+
+When one allowed region is configured, validation and formatting will be restricted to just that
+region (that means that changes of the region via viewValue won't have effect).
+
+```js preview-story
+export const oneAllowedRegion = () => html`
+
+
+`;
+```
+
+## Format strategy
+
+Determines what the formatter output should look like.
+Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
+
+Possible values:
+
+| strategy | output |
+| :------------ | ---------------------: |
+| e164 | `+46707123456` |
+| international | `+46 70 712 34 56` |
+| national | `070-712 34 56` |
+| significant | `707123456` |
+| rfc3966 | `tel:+46-70-712-34-56` |
+
+Also see:
+
+- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
+
+```js preview-story
+export const formatStrategy = () => {
+ const inputTel = createRef();
+ return html`
+
+
+
+ `;
+};
+```
+
+## Live format
+
+Type '6' in the example below to see how the phone number is formatted during typing.
+
+See [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
+
+```js preview-story
+export const liveFormat = () => html`
+
+`;
+```
+
+## Active phone number type
+
+The readonly acessor `.activePhoneNumberType` outputs the current phone number type, based on
+the textbox value.
+
+Possible types: `fixed-line`, `fixed-line-or-mobile`, `mobile`, `pager`, `personal-number`, `premium-rate`, `shared-cost`, `toll-free`, `uan`, `voip`, `unknown`
+
+Also see:
+
+- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
+
+```js preview-story
+export const activePhoneNumberType = () => html`
+
+
+`;
+```
diff --git a/docs/components/inputs/input-tel/index.md b/docs/components/inputs/input-tel/index.md
new file mode 100644
index 000000000..f8548f9c5
--- /dev/null
+++ b/docs/components/inputs/input-tel/index.md
@@ -0,0 +1,3 @@
+# Inputs >> Input Tel ||20
+
+-> go to Overview
diff --git a/docs/components/inputs/input-tel/overview.md b/docs/components/inputs/input-tel/overview.md
new file mode 100644
index 000000000..58b6f3a91
--- /dev/null
+++ b/docs/components/inputs/input-tel/overview.md
@@ -0,0 +1,59 @@
+# Inputs >> Input Tel >> Overview ||10
+
+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 '@lion/core';
+import { PhoneUtilManager } from '@lion/input-tel';
+import '@lion/input-tel/define';
+import '../../../docs/systems/form/assets/h-output.js';
+```
+
+```js preview-story
+export const main = () => {
+ return html`
+
+
+ `;
+};
+```
+
+## Features
+
+- Extends our [input](../input/overview.md)
+- Shows a mobile telephone keypad on mobile (by having a native `` 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/input-tel
+```
+
+```js
+import { LionInputTel } from '@lion/input-tel';
+// or
+import '@lion/input-tel/define';
+```
diff --git a/docs/components/inputs/input-tel/src/h-region-code-table.js b/docs/components/inputs/input-tel/src/h-region-code-table.js
new file mode 100644
index 000000000..84c348a00
--- /dev/null
+++ b/docs/components/inputs/input-tel/src/h-region-code-table.js
@@ -0,0 +1,107 @@
+import { LitElement, css, html, repeat, ScopedStylesController } from '@lion/core';
+import { regionMetaList } from '../../select-rich/src/regionMetaList.js';
+
+export class HRegionCodeTable extends LitElement {
+ static properties = {
+ regionMeta: Object,
+ };
+
+ constructor() {
+ super();
+ /** @type {ScopedStylesController} */
+ this.scopedStylesController = new ScopedStylesController(this);
+ }
+
+ /**
+ * @param {CSSResult} scope
+ */
+ static scopedStyles(scope) {
+ return css`
+ /* Custom input range styling comes here, be aware that this won't work for polyfilled browsers */
+ .${scope} .sr-only {
+ position: absolute;
+ top: 0;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(100%);
+ clip: rect(1px, 1px, 1px, 1px);
+ white-space: nowrap;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ .${scope} table {
+ position: relative;
+ height: 300px;
+ }
+
+ .${scope} th {
+ border-left: none;
+ border-right: none;
+ position: sticky;
+ top: -1px;
+ }
+
+ .${scope} th .backdrop {
+ background-color: white;
+ opacity: 0.95;
+ filter: blur(4px);
+ position: absolute;
+ inset: -5px;
+ }
+
+ .${scope} th .content {
+ position: relative;
+ }
+
+ .${scope} td {
+ border-left: none;
+ border-right: none;
+ }
+ `;
+ }
+
+ // Render to light dom, so global table styling will be applied
+ createRenderRoot() {
+ return this;
+ }
+
+ render() {
+ const finalRegionMetaList = this.regionMetaList || regionMetaList;
+ return html`
+