@lion/ui/docs/components/input-tel-dropdown/use-cases.md

A package of extendable web components

---
parts:
  - Input Tel Dropdown
  - Use Cases
title: 'Input Tel Dropdown: Use Cases'
eleventyNavigation:
  key: 'Input Tel Dropdown: Use Cases'
  order: 20
  parent: Input Tel Dropdown
  title: Use Cases
---

# Input Tel Dropdown: Use Cases

```js script
import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from 'lit/directives/ref.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { PhoneUtilManager } from '@lion/ui/input-tel.js';
import '@lion/ui/define/lion-input-tel-dropdown.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';

// TODO: make each example load/use the dependencies by default
// loadDefaultFeedbackMessages();
```

## Input Tel Dropdown

When `.allowedRegions` is not configured, all regions/countries will be available in the dropdown
list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.

```js preview-story
export const InputTelDropdown = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-tel-dropdown
      label="Select region via dropdown"
      help-text="Shows all regions by default"
      name="phoneNumber"
    ></lion-input-tel-dropdown>
    <h-output
      .show="${['modelValue', 'activeRegion']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};
```

## Allowed regions

When `.allowedRegions` is configured, only those regions/countries will be available in the dropdown
list.

```js preview-story
export const allowedRegions = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-tel-dropdown
      label="Select region via dropdown"
      help-text="With region code 'NL'"
      .modelValue="${'+31612345678'}"
      name="phoneNumber"
      .allowedRegions="${['NL', 'DE', 'GB']}"
    ></lion-input-tel-dropdown>
    <h-output
      .show="${['modelValue', 'activeRegion']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};
```

## Preferred regions

When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.

```js preview-story
export const preferredRegionCodes = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-tel-dropdown
      label="Select region via dropdown"
      help-text="Preferred regions show on top"
      .modelValue="${'+31612345678'}"
      name="phoneNumber"
      .allowedRegions="${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}"
      .preferredRegions="${['DE', 'NL']}"
    ></lion-input-tel-dropdown>
    <h-output
      .show="${['modelValue', 'activeRegion']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};
```

## Format

### 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      | not applicable for input-tel-dropdown |
| significant   | not applicable for input-tel-dropdown |
| 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 = () => {
  loadDefaultFeedbackMessages();
  const inputTel = createRef();
  return html`
    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
      <option value="e164">e164</option>
      <option value="international">international</option>
      <option value="rfc3966">rfc3966</option>
    </select>
    <lion-input-tel-dropdown
      ${ref(inputTel)}
      label="Format strategy"
      help-text="Choose a strategy above"
      format-strategy="e164"
      name="phoneNumber"
    ></lion-input-tel-dropdown>
    <h-output
      .show="${['modelValue', 'formatStrategy']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};
```

### Format country code style

You can style the country code with parentheses.

```js preview-story
export const formatCountryCodeStyle = () => {
  loadDefaultFeedbackMessages();
  const inputTel = createRef();
  return html`
    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
      <option value="e164">e164</option>
      <option value="international">international</option>
      <option value="rfc3966">rfc3966</option>
    </select>
    <lion-input-tel-dropdown
      ${ref(inputTel)}
      label="Format strategy"
      help-text="Choose a strategy above"
      format-country-code-style="parentheses"
      format-strategy="e164"
      name="phoneNumber"
    ></lion-input-tel-dropdown>
    <h-output
      .show="${['modelValue', 'formatStrategy']}"
      .readyPromise="${PhoneUtilManager.loadComplete}"
    ></h-output>
  `;
};
```