Input Tel Dropdown: Use Cases
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.
export const InputTelDropdown = () => 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.
export const allowedRegions = () => 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.
export const preferredRegionCodes = () => 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>
`;