Get help Color blind mode Low vision mode

Phone Input Review

Input component for telephone numbers with country code.

Examples #

Open in new window 
<duet-grid grid-template="small">
  <duet-phone-input></duet-phone-input>
</duet-grid>
Open in new window 
<duet-grid grid-template="small">
  <duet-phone-input
    label="Your Nordic phone number"
    countries='["FI", "SE", "NO", "DK", "IS"]'
  ></duet-phone-input>
</duet-grid>
Open in new window 
<duet-grid grid-template="small">
  <duet-phone-input></duet-phone-input>
</duet-grid>

<script>
  // It is possible to provide all countries to the Phone Input using the countries property.
  // However, as it is redundant and has negative impact on performance, it should only be done for very strong reasons.

  // Note that the Phone Input uses its own country data only for assisting the user. The component itself does no
  // validation. If you want to validate the user input on the server, you must use your own country data. For client
  // side country validation you can access the components countries property instead of using your own country data.

  document.querySelector("duet-phone-input").countries = [
    {
      isoCode: "AF",
      en: "Afghanistan",
      fi: "Afganistan",
      sv: "Afghanistan",
      telephoneCountryCode: "93",
    },
    {
      isoCode: "AL",
      en: "Albania",
      fi: "Albania",
      sv: "Albanien",
      telephoneCountryCode: "355",
    },
    {
      isoCode: "DZ",
      en: "Algeria",
      fi: "Algeria",
      sv: "Algeriet",
      telephoneCountryCode: "213",
    },
    {
      isoCode: "AS",
      en: "American Samoa",
      fi: "Amerikan Samoa",
      sv: "Amerikanska Samoa",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "AD",
      en: "Andorra",
      fi: "Andorra",
      sv: "Andorra",
      telephoneCountryCode: "376",
    },
    {
      isoCode: "AO",
      en: "Angola",
      fi: "Angola",
      sv: "Angola",
      telephoneCountryCode: "244",
    },
    {
      isoCode: "AI",
      en: "Anguilla",
      fi: "Anguilla",
      sv: "Anguilla",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "AG",
      en: "Antigua and Barbuda",
      fi: "Antigua ja Barbuda",
      sv: "Antigua och Barbuda",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "AR",
      en: "Argentina",
      fi: "Argentiina",
      sv: "Argentina",
      telephoneCountryCode: "54",
    },
    {
      isoCode: "AM",
      en: "Armenia",
      fi: "Armenia",
      sv: "Armenien",
      telephoneCountryCode: "374",
    },
    {
      isoCode: "AW",
      en: "Aruba",
      fi: "Aruba",
      sv: "Aruba",
      telephoneCountryCode: "297",
    },
    {
      isoCode: "AU",
      en: "Australia",
      fi: "Australia",
      sv: "Australien",
      telephoneCountryCode: "61",
    },
    {
      isoCode: "AT",
      en: "Austria",
      fi: "Itävalta",
      sv: "Österrike",
      telephoneCountryCode: "43",
    },
    {
      isoCode: "AZ",
      en: "Azerbaijan",
      fi: "Azerbaidžan",
      sv: "Azerbajdzjan",
      telephoneCountryCode: "994",
    },
    {
      isoCode: "BS",
      en: "Bahamas",
      fi: "Bahama",
      sv: "Bahamas",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "BH",
      en: "Bahrain",
      fi: "Bahrain",
      sv: "Bahrain",
      telephoneCountryCode: "973",
    },
    {
      isoCode: "BD",
      en: "Bangladesh",
      fi: "Bangladesh",
      sv: "Bangladesh",
      telephoneCountryCode: "880",
    },
    {
      isoCode: "BB",
      en: "Barbados",
      fi: "Barbados",
      sv: "Barbados",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "BY",
      en: "Belarus",
      fi: "Valko-Venäjä",
      sv: "Belarus",
      telephoneCountryCode: "375",
    },
    {
      isoCode: "BE",
      en: "Belgium",
      fi: "Belgia",
      sv: "Belgien",
      telephoneCountryCode: "32",
    },
    {
      isoCode: "BZ",
      en: "Belize",
      fi: "Belize",
      sv: "Belize",
      telephoneCountryCode: "501",
    },
    {
      isoCode: "BJ",
      en: "Benin",
      fi: "Benin",
      sv: "Benin",
      telephoneCountryCode: "229",
    },
    {
      isoCode: "BM",
      en: "Bermuda",
      fi: "Bermuda",
      sv: "Bermuda",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "BT",
      en: "Bhutan",
      fi: "Bhutan",
      sv: "Bhutan",
      telephoneCountryCode: "975",
    },
    {
      isoCode: "BO",
      en: "Bolivia",
      fi: "Bolivia",
      sv: "Bolivia",
      telephoneCountryCode: "591",
    },
    {
      isoCode: "BA",
      en: "Bosnia and Herzegovina",
      fi: "Bosnia ja Hertsegovina",
      sv: "Bosnien och Hercegovina",
      telephoneCountryCode: "387",
    },
    {
      isoCode: "BW",
      en: "Botswana",
      fi: "Botswana",
      sv: "Botswana",
      telephoneCountryCode: "267",
    },
    {
      isoCode: "BR",
      en: "Brazil",
      fi: "Brasilia",
      sv: "Brasilien",
      telephoneCountryCode: "55",
    },
    {
      isoCode: "IO",
      en: "British Indian Ocean Territory",
      fi: "Brittiläinen Intian valtameren alue",
      sv: "Brittiska territoriet i Indiska Oceanen",
      telephoneCountryCode: "246",
    },
    {
      isoCode: "BN",
      en: "Brunei Darussalam",
      fi: "Brunei",
      sv: "Brunei",
      telephoneCountryCode: "673",
    },
    {
      isoCode: "BG",
      en: "Bulgaria",
      fi: "Bulgaria",
      sv: "Bulgarien",
      telephoneCountryCode: "359",
    },
    {
      isoCode: "BF",
      en: "Burkina Faso",
      fi: "Burkina Faso",
      sv: "Burkina Faso",
      telephoneCountryCode: "226",
    },
    {
      isoCode: "BI",
      en: "Burundi",
      fi: "Burundi",
      sv: "Burundi",
      telephoneCountryCode: "257",
    },
    {
      isoCode: "KH",
      en: "Cambodia",
      fi: "Kambodža",
      sv: "Kambodja",
      telephoneCountryCode: "855",
    },
    {
      isoCode: "CM",
      en: "Cameroon",
      fi: "Kamerun",
      sv: "Kamerun",
      telephoneCountryCode: "237",
    },
    {
      isoCode: "CA",
      en: "Canada",
      fi: "Kanada",
      sv: "Kanada",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "CV",
      en: "Cape Verde",
      fi: "Kap Verde",
      sv: "Kap Verde",
      telephoneCountryCode: "238",
    },
    {
      isoCode: "KY",
      en: "Cayman Islands",
      fi: "Caymansaaret",
      sv: "Caymanöarna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "CF",
      en: "Central African Republic",
      fi: "Keski-Afrikan tasavalta",
      sv: "Centralafrikanska republiken",
      telephoneCountryCode: "236",
    },
    {
      isoCode: "TD",
      en: "Chad",
      fi: "Tšad",
      sv: "Tchad",
      telephoneCountryCode: "235",
    },
    {
      isoCode: "CL",
      en: "Chile",
      fi: "Chile",
      sv: "Chile",
      telephoneCountryCode: "56",
    },
    {
      isoCode: "CN",
      en: "People's Republic of China",
      fi: "Kiina",
      sv: "Kina",
      telephoneCountryCode: "86",
    },
    {
      isoCode: "CX",
      en: "Christmas Island",
      fi: "Joulusaari",
      sv: "Julön",
      telephoneCountryCode: "61",
    },
    {
      isoCode: "CC",
      en: "Cocos (Keeling) Islands",
      fi: "Kookossaaret",
      sv: "Kokosöarna",
      telephoneCountryCode: "61",
    },
    {
      isoCode: "CO",
      en: "Colombia",
      fi: "Kolumbia",
      sv: "Colombia",
      telephoneCountryCode: "57",
    },
    {
      isoCode: "KM",
      en: "Comoros",
      fi: "Komorit",
      sv: "Komorerna",
      telephoneCountryCode: "269",
    },
    {
      isoCode: "CG",
      en: "Republic of the Congo",
      fi: "Kongon tasavalta",
      sv: "Kongo-Brazzaville",
      telephoneCountryCode: "242",
    },
    {
      isoCode: "CD",
      en: "Democratic Republic of the Congo",
      fi: "Kongon demokraattinen tasavalta",
      sv: "Demokratiska republiken Kongo",
      telephoneCountryCode: "243",
    },
    {
      isoCode: "CK",
      en: "Cook Islands",
      fi: "Cookinsaaret",
      sv: "Cooköarna",
      telephoneCountryCode: "682",
    },
    {
      isoCode: "CR",
      en: "Costa Rica",
      fi: "Costa Rica",
      sv: "Costa Rica",
      telephoneCountryCode: "506",
    },
    {
      isoCode: "CI",
      en: "Cote D'Ivoire",
      fi: "Norsunluurannikko",
      sv: "Elfenbenskusten",
      telephoneCountryCode: "225",
    },
    {
      isoCode: "HR",
      en: "Croatia",
      fi: "Kroatia",
      sv: "Kroatien",
      telephoneCountryCode: "385",
    },
    {
      isoCode: "CU",
      en: "Cuba",
      fi: "Kuuba",
      sv: "Kuba",
      telephoneCountryCode: "53",
    },
    {
      isoCode: "CY",
      en: "Cyprus",
      fi: "Kypros",
      sv: "Cypern",
      telephoneCountryCode: "357",
    },
    {
      isoCode: "CZ",
      en: "Czech Republic",
      fi: "Tšekki",
      sv: "Tjeckien",
      telephoneCountryCode: "420",
    },
    {
      isoCode: "DK",
      en: "Denmark",
      fi: "Tanska",
      sv: "Danmark",
      telephoneCountryCode: "45",
    },
    {
      isoCode: "DJ",
      en: "Djibouti",
      fi: "Djibouti",
      sv: "Djibouti",
      telephoneCountryCode: "253",
    },
    {
      isoCode: "DM",
      en: "Dominica",
      fi: "Dominica",
      sv: "Dominica",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "DO",
      en: "Dominican Republic",
      fi: "Dominikaaninen tasavalta",
      sv: "Dominikanska republiken",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "EC",
      en: "Ecuador",
      fi: "Ecuador",
      sv: "Ecuador",
      telephoneCountryCode: "593",
    },
    {
      isoCode: "EG",
      en: "Egypt",
      fi: "Egypti",
      sv: "Egypten",
      telephoneCountryCode: "20",
    },
    {
      isoCode: "SV",
      en: "El Salvador",
      fi: "El Salvador",
      sv: "El Salvador",
      telephoneCountryCode: "503",
    },
    {
      isoCode: "GQ",
      en: "Equatorial Guinea",
      fi: "Päiväntasaajan Guinea",
      sv: "Ekvatorialguinea",
      telephoneCountryCode: "240",
    },
    {
      isoCode: "ER",
      en: "Eritrea",
      fi: "Eritrea",
      sv: "Eritrea",
      telephoneCountryCode: "291",
    },
    {
      isoCode: "EE",
      en: "Estonia",
      fi: "Viro",
      sv: "Estland",
      telephoneCountryCode: "372",
    },
    {
      isoCode: "ET",
      en: "Ethiopia",
      fi: "Etiopia",
      sv: "Etiopien",
      telephoneCountryCode: "251",
    },
    {
      isoCode: "FK",
      en: "Falkland Islands (Malvinas)",
      fi: "Falklandinsaaret",
      sv: "Falklandsöarna",
      telephoneCountryCode: "500",
    },
    {
      isoCode: "FO",
      en: "Faroe Islands",
      fi: "Färsaaret",
      sv: "Färöarna",
      telephoneCountryCode: "298",
    },
    {
      isoCode: "FJ",
      en: "Fiji",
      fi: "Fidži",
      sv: "Fiji",
      telephoneCountryCode: "679",
    },
    {
      isoCode: "FI",
      en: "Finland",
      fi: "Suomi",
      sv: "Finland",
      telephoneCountryCode: "358",
    },
    {
      isoCode: "FR",
      en: "France",
      fi: "Ranska",
      sv: "Frankrike",
      telephoneCountryCode: "33",
    },
    {
      isoCode: "GF",
      en: "French Guiana",
      fi: "Ranskan Guayana",
      sv: "Franska Guyana",
      telephoneCountryCode: "594",
    },
    {
      isoCode: "PF",
      en: "French Polynesia",
      fi: "Ranskan Polynesia",
      sv: "Franska Polynesien",
      telephoneCountryCode: "689",
    },
    {
      isoCode: "GA",
      en: "Gabon",
      fi: "Gabon",
      sv: "Gabon",
      telephoneCountryCode: "241",
    },
    {
      isoCode: "GM",
      en: "Republic of The Gambia",
      fi: "Gambia",
      sv: "Gambia",
      telephoneCountryCode: "220",
    },
    {
      isoCode: "GE",
      en: "Georgia",
      fi: "Georgia",
      sv: "Georgien",
      telephoneCountryCode: "995",
    },
    {
      isoCode: "DE",
      en: "Germany",
      fi: "Saksa",
      sv: "Tyskland",
      telephoneCountryCode: "49",
    },
    {
      isoCode: "GH",
      en: "Ghana",
      fi: "Ghana",
      sv: "Ghana",
      telephoneCountryCode: "233",
    },
    {
      isoCode: "GI",
      en: "Gibraltar",
      fi: "Gibraltar",
      sv: "Gibraltar",
      telephoneCountryCode: "350",
    },
    {
      isoCode: "GR",
      en: "Greece",
      fi: "Kreikka",
      sv: "Grekland",
      telephoneCountryCode: "30",
    },
    {
      isoCode: "GL",
      en: "Greenland",
      fi: "Grönlanti",
      sv: "Grönland",
      telephoneCountryCode: "299",
    },
    {
      isoCode: "GD",
      en: "Grenada",
      fi: "Grenada",
      sv: "Grenada",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "GP",
      en: "Guadeloupe",
      fi: "Guadeloupe",
      sv: "Guadeloupe",
      telephoneCountryCode: "590",
    },
    {
      isoCode: "GU",
      en: "Guam",
      fi: "Guam",
      sv: "Guam",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "GT",
      en: "Guatemala",
      fi: "Guatemala",
      sv: "Guatemala",
      telephoneCountryCode: "502",
    },
    {
      isoCode: "GN",
      en: "Guinea",
      fi: "Guinea",
      sv: "Guinea",
      telephoneCountryCode: "224",
    },
    {
      isoCode: "GW",
      en: "Guinea-Bissau",
      fi: "Guinea-Bissau",
      sv: "Guinea Bissau",
      telephoneCountryCode: "245",
    },
    {
      isoCode: "GY",
      en: "Guyana",
      fi: "Guyana",
      sv: "Guyana",
      telephoneCountryCode: "592",
    },
    {
      isoCode: "HT",
      en: "Haiti",
      fi: "Haiti",
      sv: "Haiti",
      telephoneCountryCode: "509",
    },
    {
      isoCode: "VA",
      en: "Holy See (Vatican City State)",
      fi: "Vatikaanivaltio",
      sv: "Vatikanstaten",
      telephoneCountryCode: "39",
    },
    {
      isoCode: "HN",
      en: "Honduras",
      fi: "Honduras",
      sv: "Honduras",
      telephoneCountryCode: "504",
    },
    {
      isoCode: "HK",
      en: "Hong Kong",
      fi: "Hongkong",
      sv: "Hongkong",
      telephoneCountryCode: "852",
    },
    {
      isoCode: "HU",
      en: "Hungary",
      fi: "Unkari",
      sv: "Ungern",
      telephoneCountryCode: "36",
    },
    {
      isoCode: "IS",
      en: "Iceland",
      fi: "Islanti",
      sv: "Island",
      telephoneCountryCode: "354",
    },
    {
      isoCode: "IN",
      en: "India",
      fi: "Intia",
      sv: "Indien",
      telephoneCountryCode: "91",
    },
    {
      isoCode: "ID",
      en: "Indonesia",
      fi: "Indonesia",
      sv: "Indonesien",
      telephoneCountryCode: "62",
    },
    {
      isoCode: "IR",
      en: "Islamic Republic of Iran",
      fi: "Iran",
      sv: "Iran",
      telephoneCountryCode: "98",
    },
    {
      isoCode: "IQ",
      en: "Iraq",
      fi: "Irak",
      sv: "Irak",
      telephoneCountryCode: "964",
    },
    {
      isoCode: "IE",
      en: "Ireland",
      fi: "Irlanti",
      sv: "Irland",
      telephoneCountryCode: "353",
    },
    {
      isoCode: "IL",
      en: "Israel",
      fi: "Israel",
      sv: "Israel",
      telephoneCountryCode: "972",
    },
    {
      isoCode: "IT",
      en: "Italy",
      fi: "Italia",
      sv: "Italien",
      telephoneCountryCode: "39",
    },
    {
      isoCode: "JM",
      en: "Jamaica",
      fi: "Jamaika",
      sv: "Jamaica",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "JP",
      en: "Japan",
      fi: "Japani",
      sv: "Japan",
      telephoneCountryCode: "81",
    },
    {
      isoCode: "JO",
      en: "Jordan",
      fi: "Jordania",
      sv: "Jordanien",
      telephoneCountryCode: "962",
    },
    {
      isoCode: "KZ",
      en: "Kazakhstan",
      fi: "Kazakstan",
      sv: "Kazakstan",
      telephoneCountryCode: "7",
    },
    {
      isoCode: "KE",
      en: "Kenya",
      fi: "Kenia",
      sv: "Kenya",
      telephoneCountryCode: "254",
    },
    {
      isoCode: "KI",
      en: "Kiribati",
      fi: "Kiribati",
      sv: "Kiribati",
      telephoneCountryCode: "686",
    },
    {
      isoCode: "KP",
      en: "North Korea",
      fi: "Korean demokraattinen kansantasavalta",
      sv: "Nordkorea",
      telephoneCountryCode: "850",
    },
    {
      isoCode: "KR",
      en: "South Korea",
      fi: "Korean tasavalta",
      sv: "Sydkorea",
      telephoneCountryCode: "82",
    },
    {
      isoCode: "KW",
      en: "Kuwait",
      fi: "Kuwait",
      sv: "Kuwait",
      telephoneCountryCode: "965",
    },
    {
      isoCode: "KG",
      en: "Kyrgyzstan",
      fi: "Kirgisia",
      sv: "Kirgizistan",
      telephoneCountryCode: "996",
    },
    {
      isoCode: "LA",
      en: "Lao People's Democratic Republic",
      fi: "Laos",
      sv: "Laos",
      telephoneCountryCode: "856",
    },
    {
      isoCode: "LV",
      en: "Latvia",
      fi: "Latvia",
      sv: "Lettland",
      telephoneCountryCode: "371",
    },
    {
      isoCode: "LB",
      en: "Lebanon",
      fi: "Libanon",
      sv: "Libanon",
      telephoneCountryCode: "961",
    },
    {
      isoCode: "LS",
      en: "Lesotho",
      fi: "Lesotho",
      sv: "Lesotho",
      telephoneCountryCode: "266",
    },
    {
      isoCode: "LR",
      en: "Liberia",
      fi: "Liberia",
      sv: "Liberia",
      telephoneCountryCode: "231",
    },
    {
      isoCode: "LY",
      en: "Libya",
      fi: "Libya",
      sv: "Libyen",
      telephoneCountryCode: "218",
    },
    {
      isoCode: "LI",
      en: "Liechtenstein",
      fi: "Liechtenstein",
      sv: "Liechtenstein",
      telephoneCountryCode: "423",
    },
    {
      isoCode: "LT",
      en: "Lithuania",
      fi: "Liettua",
      sv: "Litauen",
      telephoneCountryCode: "370",
    },
    {
      isoCode: "LU",
      en: "Luxembourg",
      fi: "Luxemburg",
      sv: "Luxemburg",
      telephoneCountryCode: "352",
    },
    {
      isoCode: "MO",
      en: "Macao",
      fi: "Macao",
      sv: "Macau",
      telephoneCountryCode: "853",
    },
    {
      isoCode: "MG",
      en: "Madagascar",
      fi: "Madagaskar",
      sv: "Madagaskar",
      telephoneCountryCode: "261",
    },
    {
      isoCode: "MW",
      en: "Malawi",
      fi: "Malawi",
      sv: "Malawi",
      telephoneCountryCode: "265",
    },
    {
      isoCode: "MY",
      en: "Malaysia",
      fi: "Malesia",
      sv: "Malaysia",
      telephoneCountryCode: "60",
    },
    {
      isoCode: "MV",
      en: "Maldives",
      fi: "Malediivit",
      sv: "Maldiverna",
      telephoneCountryCode: "960",
    },
    {
      isoCode: "ML",
      en: "Mali",
      fi: "Mali",
      sv: "Mali",
      telephoneCountryCode: "223",
    },
    {
      isoCode: "MT",
      en: "Malta",
      fi: "Malta",
      sv: "Malta",
      telephoneCountryCode: "356",
    },
    {
      isoCode: "MH",
      en: "Marshall Islands",
      fi: "Marshallinsaaret",
      sv: "Marshallöarna",
      telephoneCountryCode: "692",
    },
    {
      isoCode: "MQ",
      en: "Martinique",
      fi: "Martinique",
      sv: "Martinique",
      telephoneCountryCode: "596",
    },
    {
      isoCode: "MR",
      en: "Mauritania",
      fi: "Mauritania",
      sv: "Mauretanien",
      telephoneCountryCode: "222",
    },
    {
      isoCode: "MU",
      en: "Mauritius",
      fi: "Mauritius",
      sv: "Mauritius",
      telephoneCountryCode: "230",
    },
    {
      isoCode: "YT",
      en: "Mayotte",
      fi: "Mayotte",
      sv: "Mayotte",
      telephoneCountryCode: "262",
    },
    {
      isoCode: "MX",
      en: "Mexico",
      fi: "Meksiko",
      sv: "Mexiko",
      telephoneCountryCode: "52",
    },
    {
      isoCode: "FM",
      en: "Micronesia, Federated States of",
      fi: "Mikronesian liittovaltio",
      sv: "Mikronesiska federationen",
      telephoneCountryCode: "691",
    },
    {
      isoCode: "MD",
      en: "Moldova, Republic of",
      fi: "Moldova",
      sv: "Moldavien",
      telephoneCountryCode: "373",
    },
    {
      isoCode: "MC",
      en: "Monaco",
      fi: "Monaco",
      sv: "Monaco",
      telephoneCountryCode: "377",
    },
    {
      isoCode: "MN",
      en: "Mongolia",
      fi: "Mongolia",
      sv: "Mongoliet",
      telephoneCountryCode: "976",
    },
    {
      isoCode: "MS",
      en: "Montserrat",
      fi: "Montserrat",
      sv: "Montserrat",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "MA",
      en: "Morocco",
      fi: "Marokko",
      sv: "Marocko",
      telephoneCountryCode: "212",
    },
    {
      isoCode: "MZ",
      en: "Mozambique",
      fi: "Mosambik",
      sv: "Moçambique",
      telephoneCountryCode: "258",
    },
    {
      isoCode: "MM",
      en: "Myanmar",
      fi: "Myanmar",
      sv: "Burma",
      telephoneCountryCode: "95",
    },
    {
      isoCode: "NA",
      en: "Namibia",
      fi: "Namibia",
      sv: "Namibia",
      telephoneCountryCode: "264",
    },
    {
      isoCode: "NR",
      en: "Nauru",
      fi: "Nauru",
      sv: "Nauru",
      telephoneCountryCode: "674",
    },
    {
      isoCode: "NP",
      en: "Nepal",
      fi: "Nepal",
      sv: "Nepal",
      telephoneCountryCode: "977",
    },
    {
      isoCode: "NL",
      en: "Netherlands",
      fi: "Alankomaat",
      sv: "Nederländerna",
      telephoneCountryCode: "31",
    },
    {
      isoCode: "NC",
      en: "New Caledonia",
      fi: "Uusi-Kaledonia",
      sv: "Nya Kaledonien",
      telephoneCountryCode: "687",
    },
    {
      isoCode: "NZ",
      en: "New Zealand",
      fi: "Uusi-Seelanti",
      sv: "Nya Zeeland",
      telephoneCountryCode: "64",
    },
    {
      isoCode: "NI",
      en: "Nicaragua",
      fi: "Nicaragua",
      sv: "Nicaragua",
      telephoneCountryCode: "505",
    },
    {
      isoCode: "NE",
      en: "Niger",
      fi: "Niger",
      sv: "Niger",
      telephoneCountryCode: "227",
    },
    {
      isoCode: "NG",
      en: "Nigeria",
      fi: "Nigeria",
      sv: "Nigeria",
      telephoneCountryCode: "234",
    },
    {
      isoCode: "NU",
      en: "Niue",
      fi: "Niue",
      sv: "Niue",
      telephoneCountryCode: "683",
    },
    {
      isoCode: "NF",
      en: "Norfolk Island",
      fi: "Norfolkinsaari",
      sv: "Norfolkön",
      telephoneCountryCode: "672",
    },
    {
      isoCode: "MK",
      en: "The Republic of North Macedonia",
      fi: "Pohjois-Makedonia",
      sv: "Nordmakedonien",
      telephoneCountryCode: "389",
    },
    {
      isoCode: "MP",
      en: "Northern Mariana Islands",
      fi: "Pohjois-Mariaanit",
      sv: "Nordmarianerna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "NO",
      en: "Norway",
      fi: "Norja",
      sv: "Norge",
      telephoneCountryCode: "47",
    },
    {
      isoCode: "OM",
      en: "Oman",
      fi: "Oman",
      sv: "Oman",
      telephoneCountryCode: "968",
    },
    {
      isoCode: "PK",
      en: "Pakistan",
      fi: "Pakistan",
      sv: "Pakistan",
      telephoneCountryCode: "92",
    },
    {
      isoCode: "PW",
      en: "Palau",
      fi: "Palau",
      sv: "Palau",
      telephoneCountryCode: "680",
    },
    {
      isoCode: "PS",
      en: "State of Palestine",
      fi: "Palestiina",
      sv: "Palestinska territoriet, ockuperade",
      telephoneCountryCode: "970",
    },
    {
      isoCode: "PA",
      en: "Panama",
      fi: "Panama",
      sv: "Panama",
      telephoneCountryCode: "507",
    },
    {
      isoCode: "PG",
      en: "Papua New Guinea",
      fi: "Papua-Uusi-Guinea",
      sv: "Papua Nya Guinea",
      telephoneCountryCode: "675",
    },
    {
      isoCode: "PY",
      en: "Paraguay",
      fi: "Paraguay",
      sv: "Paraguay",
      telephoneCountryCode: "595",
    },
    {
      isoCode: "PE",
      en: "Peru",
      fi: "Peru",
      sv: "Peru",
      telephoneCountryCode: "51",
    },
    {
      isoCode: "PH",
      en: "Philippines",
      fi: "Filippiinit",
      sv: "Filippinerna",
      telephoneCountryCode: "63",
    },
    {
      isoCode: "PL",
      en: "Poland",
      fi: "Puola",
      sv: "Polen",
      telephoneCountryCode: "48",
    },
    {
      isoCode: "PT",
      en: "Portugal",
      fi: "Portugali",
      sv: "Portugal",
      telephoneCountryCode: "351",
    },
    {
      isoCode: "PR",
      en: "Puerto Rico",
      fi: "Puerto Rico",
      sv: "Puerto Rico",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "QA",
      en: "Qatar",
      fi: "Qatar",
      sv: "Qatar",
      telephoneCountryCode: "974",
    },
    {
      isoCode: "RE",
      en: "Reunion",
      fi: "Réunion",
      sv: "Réunion",
      telephoneCountryCode: "262",
    },
    {
      isoCode: "RO",
      en: "Romania",
      fi: "Romania",
      sv: "Rumänien",
      telephoneCountryCode: "40",
    },
    {
      isoCode: "RU",
      en: "Russian Federation",
      fi: "Venäjä",
      sv: "Ryssland",
      telephoneCountryCode: "7",
    },
    {
      isoCode: "RW",
      en: "Rwanda",
      fi: "Ruanda",
      sv: "Rwanda",
      telephoneCountryCode: "250",
    },
    {
      isoCode: "SH",
      en: "Saint Helena",
      fi: "Saint Helena",
      sv: "Sankta Helena",
      telephoneCountryCode: "290",
    },
    {
      isoCode: "KN",
      en: "Saint Kitts and Nevis",
      fi: "Saint Kitts ja Nevis",
      sv: "Saint Kitts och Nevis",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "LC",
      en: "Saint Lucia",
      fi: "Saint Lucia",
      sv: "Saint Lucia",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "PM",
      en: "Saint Pierre and Miquelon",
      fi: "Saint-Pierre ja Miquelon",
      sv: "Saint-Pierre och Miquelon",
      telephoneCountryCode: "508",
    },
    {
      isoCode: "VC",
      en: "Saint Vincent and the Grenadines",
      fi: "Saint Vincent ja Grenadiinit",
      sv: "Saint Vincent och Grenadinerna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "WS",
      en: "Samoa",
      fi: "Samoa",
      sv: "Samoa",
      telephoneCountryCode: "685",
    },
    {
      isoCode: "SM",
      en: "San Marino",
      fi: "San Marino",
      sv: "San Marino",
      telephoneCountryCode: "378",
    },
    {
      isoCode: "ST",
      en: "Sao Tome and Principe",
      fi: "São Tomé ja Príncipe",
      sv: "São Tomé och Príncipe",
      telephoneCountryCode: "239",
    },
    {
      isoCode: "SA",
      en: "Saudi Arabia",
      fi: "Saudi-Arabia",
      sv: "Saudiarabien",
      telephoneCountryCode: "966",
    },
    {
      isoCode: "SN",
      en: "Senegal",
      fi: "Senegal",
      sv: "Senegal",
      telephoneCountryCode: "221",
    },
    {
      isoCode: "SC",
      en: "Seychelles",
      fi: "Seychellit",
      sv: "Seychellerna",
      telephoneCountryCode: "248",
    },
    {
      isoCode: "SL",
      en: "Sierra Leone",
      fi: "Sierra Leone",
      sv: "Sierra Leone",
      telephoneCountryCode: "232",
    },
    {
      isoCode: "SG",
      en: "Singapore",
      fi: "Singapore",
      sv: "Singapore",
      telephoneCountryCode: "65",
    },
    {
      isoCode: "SK",
      en: "Slovakia",
      fi: "Slovakia",
      sv: "Slovakien",
      telephoneCountryCode: "421",
    },
    {
      isoCode: "SI",
      en: "Slovenia",
      fi: "Slovenia",
      sv: "Slovenien",
      telephoneCountryCode: "386",
    },
    {
      isoCode: "SB",
      en: "Solomon Islands",
      fi: "Salomonsaaret",
      sv: "Salomonöarna",
      telephoneCountryCode: "677",
    },
    {
      isoCode: "SO",
      en: "Somalia",
      fi: "Somalia",
      sv: "Somalia",
      telephoneCountryCode: "252",
    },
    {
      isoCode: "ZA",
      en: "South Africa",
      fi: "Etelä-Afrikka",
      sv: "Sydafrika",
      telephoneCountryCode: "27",
    },
    {
      isoCode: "ES",
      en: "Spain",
      fi: "Espanja",
      sv: "Spanien",
      telephoneCountryCode: "34",
    },
    {
      isoCode: "LK",
      en: "Sri Lanka",
      fi: "Sri Lanka",
      sv: "Sri Lanka",
      telephoneCountryCode: "94",
    },
    {
      isoCode: "SD",
      en: "Sudan",
      fi: "Sudan",
      sv: "Sudan",
      telephoneCountryCode: "249",
    },
    {
      isoCode: "SR",
      en: "Suriname",
      fi: "Suriname",
      sv: "Surinam",
      telephoneCountryCode: "597",
    },
    {
      isoCode: "SJ",
      en: "Svalbard and Jan Mayen",
      fi: "Svalbard ja Jan Mayen",
      sv: "Svalbard och Jan Mayen",
      telephoneCountryCode: "47",
    },
    {
      isoCode: "SZ",
      en: "Eswatini",
      fi: "Swazimaa",
      sv: "Eswatini",
      telephoneCountryCode: "268",
    },
    {
      isoCode: "SE",
      en: "Sweden",
      fi: "Ruotsi",
      sv: "Sverige",
      telephoneCountryCode: "46",
    },
    {
      isoCode: "CH",
      en: "Switzerland",
      fi: "Sveitsi",
      sv: "Schweiz",
      telephoneCountryCode: "41",
    },
    {
      isoCode: "SY",
      en: "Syrian Arab Republic",
      fi: "Syyria",
      sv: "Syrien",
      telephoneCountryCode: "963",
    },
    {
      isoCode: "TW",
      en: "Taiwan, Province of China",
      fi: "Taiwan",
      sv: "Taiwan",
      telephoneCountryCode: "886",
    },
    {
      isoCode: "TJ",
      en: "Tajikistan",
      fi: "Tadžikistan",
      sv: "Tadzjikistan",
      telephoneCountryCode: "992",
    },
    {
      isoCode: "TZ",
      en: "United Republic of Tanzania",
      fi: "Tansania",
      sv: "Tanzania",
      telephoneCountryCode: "255",
    },
    {
      isoCode: "TH",
      en: "Thailand",
      fi: "Thaimaa",
      sv: "Thailand",
      telephoneCountryCode: "66",
    },
    {
      isoCode: "TL",
      en: "Timor-Leste",
      fi: "Itä-Timor",
      sv: "Östtimor",
      telephoneCountryCode: "670",
    },
    {
      isoCode: "TG",
      en: "Togo",
      fi: "Togo",
      sv: "Togo",
      telephoneCountryCode: "228",
    },
    {
      isoCode: "TK",
      en: "Tokelau",
      fi: "Tokelau",
      sv: "Tokelauöarna",
      telephoneCountryCode: "690",
    },
    {
      isoCode: "TO",
      en: "Tonga",
      fi: "Tonga",
      sv: "Tonga",
      telephoneCountryCode: "676",
    },
    {
      isoCode: "TT",
      en: "Trinidad and Tobago",
      fi: "Trinidad ja Tobago",
      sv: "Trinidad och Tobago",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "TN",
      en: "Tunisia",
      fi: "Tunisia",
      sv: "Tunisien",
      telephoneCountryCode: "216",
    },
    {
      isoCode: "TR",
      en: "Türkiye",
      fi: "Turkki",
      sv: "Turkiet",
      telephoneCountryCode: "90",
    },
    {
      isoCode: "TM",
      en: "Turkmenistan",
      fi: "Turkmenistan",
      sv: "Turkmenistan",
      telephoneCountryCode: "993",
    },
    {
      isoCode: "TC",
      en: "Turks and Caicos Islands",
      fi: "Turks- ja Caicossaaret",
      sv: "Turks- och Caicosöarna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "TV",
      en: "Tuvalu",
      fi: "Tuvalu",
      sv: "Tuvalu",
      telephoneCountryCode: "688",
    },
    {
      isoCode: "UG",
      en: "Uganda",
      fi: "Uganda",
      sv: "Uganda",
      telephoneCountryCode: "256",
    },
    {
      isoCode: "UA",
      en: "Ukraine",
      fi: "Ukraina",
      sv: "Ukraina",
      telephoneCountryCode: "380",
    },
    {
      isoCode: "AE",
      en: "United Arab Emirates",
      fi: "Arabiemiirikunnat",
      sv: "Förenade Arabemiraten",
      telephoneCountryCode: "971",
    },
    {
      isoCode: "GB",
      en: "United Kingdom",
      fi: "Yhdistynyt kuningaskunta",
      sv: "Storbritannien",
      telephoneCountryCode: "44",
    },
    {
      isoCode: "US",
      en: "United States of America",
      fi: "Yhdysvallat",
      sv: "USA",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "UY",
      en: "Uruguay",
      fi: "Uruguay",
      sv: "Uruguay",
      telephoneCountryCode: "598",
    },
    {
      isoCode: "UZ",
      en: "Uzbekistan",
      fi: "Uzbekistan",
      sv: "Uzbekistan",
      telephoneCountryCode: "998",
    },
    {
      isoCode: "VU",
      en: "Vanuatu",
      fi: "Vanuatu",
      sv: "Vanuatu",
      telephoneCountryCode: "678",
    },
    {
      isoCode: "VE",
      en: "Venezuela",
      fi: "Venezuela",
      sv: "Venezuela",
      telephoneCountryCode: "58",
    },
    {
      isoCode: "VN",
      en: "Vietnam",
      fi: "Vietnam",
      sv: "Vietnam",
      telephoneCountryCode: "84",
    },
    {
      isoCode: "VG",
      en: "Virgin Islands, British",
      fi: "Brittiläiset Neitsytsaaret",
      sv: "Brittiska Jungfruöarna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "VI",
      en: "Virgin Islands, U.S.",
      fi: "Yhdysvaltain Neitsytsaaret",
      sv: "Amerikanska Jungfruöarna",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "WF",
      en: "Wallis and Futuna",
      fi: "Wallis ja Futunasaaret",
      sv: "Wallis- och Futunaöarna",
      telephoneCountryCode: "681",
    },
    {
      isoCode: "EH",
      en: "Western Sahara",
      fi: "Länsi-Sahara",
      sv: "Västsahara",
      telephoneCountryCode: "212",
    },
    {
      isoCode: "YE",
      en: "Yemen",
      fi: "Jemen",
      sv: "Jemen",
      telephoneCountryCode: "967",
    },
    {
      isoCode: "ZM",
      en: "Zambia",
      fi: "Sambia",
      sv: "Zambia",
      telephoneCountryCode: "260",
    },
    {
      isoCode: "ZW",
      en: "Zimbabwe",
      fi: "Zimbabwe",
      sv: "Zimbabwe",
      telephoneCountryCode: "263",
    },
    {
      isoCode: "AX",
      en: "Åland Islands",
      fi: "Ahvenanmaa",
      sv: "Åland",
      telephoneCountryCode: "358",
    },
    {
      isoCode: "BQ",
      en: "Bonaire, Sint Eustatius and Saba",
      fi: "Bonaire, Sint Eustatius ja Saba",
      sv: "Bonaire, Saint Eustatius och Saba",
      telephoneCountryCode: "599",
    },
    {
      isoCode: "CW",
      en: "Curaçao",
      fi: "Curaçao",
      sv: "Curacao",
      telephoneCountryCode: "599",
    },
    {
      isoCode: "GG",
      en: "Guernsey",
      fi: "Guernsey",
      sv: "Guernsey",
      telephoneCountryCode: "44",
    },
    {
      isoCode: "IM",
      en: "Isle of Man",
      fi: "Mansaari",
      sv: "Isle of Man",
      telephoneCountryCode: "44",
    },
    {
      isoCode: "JE",
      en: "Jersey",
      fi: "Jersey",
      sv: "Jersey",
      telephoneCountryCode: "44",
    },
    {
      isoCode: "ME",
      en: "Montenegro",
      fi: "Montenegro",
      sv: "Montenegro",
      telephoneCountryCode: "382",
    },
    {
      isoCode: "BL",
      en: "Saint Barthélemy",
      fi: "Saint-Barthélemy",
      sv: "Saint-Barthélemy",
      telephoneCountryCode: "590",
    },
    {
      isoCode: "MF",
      en: "Saint Martin (French part)",
      fi: "Saint-Martin",
      sv: "Saint Martin (franska delen)",
      telephoneCountryCode: "590",
    },
    {
      isoCode: "RS",
      en: "Serbia",
      fi: "Serbia",
      sv: "Serbien",
      telephoneCountryCode: "381",
    },
    {
      isoCode: "SX",
      en: "Sint Maarten (Dutch part)",
      fi: "Sint Maarten",
      sv: "Sint Maarten (nederländska delen)",
      telephoneCountryCode: "1",
    },
    {
      isoCode: "SS",
      en: "South Sudan",
      fi: "Etelä-Sudan",
      sv: "Sydsudan",
      telephoneCountryCode: "211",
    },
    {
      isoCode: "XK",
      en: "Kosovo",
      fi: "Kosovo",
      sv: "Kosovo",
      telephoneCountryCode: "383",
    },
  ]
</script>

Properties #

Property Attribute Description Type Default
accessibleDescribedBy accessible-described-by Indicates the id of a component that describes the input. string undefined
accessibleDescription accessible-description Aria description the button string undefined
accessibleDetails accessible-details Details of the component string undefined
accessibleLabelledBy accessible-labelled-by String of id's that indicate alternative labels elements string undefined
countries countries The phone input itself contains a comprehensive list of countries and their telephone country codes and it is advisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g. if we have established that the person giving their details has a Nordic phone number, then we can give a narrowed down list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or Bhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys: en, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of either two. Country[] | string | string[] Object.values(countries).filter(country => !!country.telephoneCountryCode)
disabled disabled Makes the phone input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. boolean false
error error Display the input in error state along with an error message. string ""
expand expand Expands the input to fill 100% of the container width. boolean false
identifier identifier Adds a unique identifier for the input. string undefined
label label Label for the number input. string getLocaleString(this.labelDefaults, this.language)
labelDefaults label-default Defaults for Label DuetLangObject | string { fi: "Puhelinnumero", en: "Phone number", sv: "Telefonnummer", }
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
listFirst list-first Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes. string | string[] ["FI", "SE"]
margin margin Controls the margin of the component. "auto" | "none" "auto"
name name Name of the input. string undefined
required required Set whether the input is required or not. Please note that this is required for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors. boolean false
theme theme Theme of the input. "" | "default" | "turva" ""
tooltip tooltip Tooltip to display next to the label of the input. string ""
value value Value of the input. string undefined

Events #

Event Description Type
duetBlur Emitted when the input loses focus. CustomEvent<{ originalEvent?: Event; component: "duet-phone-input"; value: string; countryCode?: string; }>
duetChange Emitted when the value has changed. CustomEvent<{ originalEvent?: Event; component: "duet-phone-input"; value: string; countryCode?: string; }>
duetFocus Emitted when the input has focus. CustomEvent<{ originalEvent?: Event; component: "duet-phone-input"; value: string; countryCode?: string; }>
duetInput Emitted when a keyboard input has ocurred. CustomEvent<{ originalEvent?: Event; component: "duet-phone-input"; value: string; countryCode?: string; }>

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus on the contained input element, use this instead of the native input.focus().

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When user must input a telephone number with a country code.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.