# Input Tel Dropdown >> Use Cases ||20
```js script
import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel-dropdown/define';
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`
`;
};
```
## 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`
`;
};
```
## 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`
`
};
```