Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Input Tel Dropdown: Overview

Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.

export const main = () => {
  return html`
    <lion-input-tel-dropdown label="Telephone number" name="phoneNumber"></lion-input-tel-dropdown>


  • Extends our input-tel
  • Shows dropdown list with all possible regions
  • Shows only allowed regions in dropdown list when .allowedRegions is configured
  • Highlights regions on top of dropdown list when .preferredRegions is configured
  • Generates template meta data for advanced


npm i --save @lion/ui
import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
// or
import '@lion/ui/define/lion-input-tel-dropdown.js';