Skip to content

Phonenumber13.10.5

A component to select country codes to your phonenumber fields


$ npm i @if-design-system/phonenumber@13.10.5

  • Norge
  • Sverige
  • Danmark
  • Finland
  • Estland
  • Latvia
  • Litauen
  • Storbritannia
  • Russland
  • Grønland
Please enter a valid phonenumber
Edit this section

Usage

Use the component when you need a country code selection for phonenumber input.

Edit this section

Accessibility

Keyboard support

Key Function
Esc Closes the component
Up Arrow Moves selection to the previous country.
Down Arrow Moves selection to the next country.
Edit this section

Anatomy

  • Norge
  • Sverige
  • Danmark
  • Finland
  • Estland
  • Latvia
  • Litauen
  • Storbritannia
  • Russland
  • Grønland
Please enter a valid phonenumber
Phonenumber
  1. Dropdown for country select
  2. List of countries
  3. Hovered contry
Edit this section

Specs

  • Norge
  • Sverige
  • Danmark
  • Finland
  • Estland
  • Latvia
  • Litauen
  • Storbritannia
  • Russland
  • Grønland
Please enter a valid phonenumber
Phonenumber
Edit this section

Code

Markup

<html class="if" lang="en"><form class="if" autocomplete="off" _lpchecked="1">
    <div class="if input-wrapper">
      <div class="if backdrop" role="presentation" id="ids-phonenumber-backdrop-_9ocp204q9"></div>
      <div class="if phonenumber-container" id="ids-phonenumber-container-_9ocp204q9" aria-labelledby="ids-phonenumber-label-_9ocp204q9" style="top: 40px;" data-whatintent="mouse" data-whatinput="keyboard">
        <button title="" aria-activedescendant="" type="button" role="combobox" aria-owns="ids-phonenumber-suggestions-_9ocp204q9" aria-controls""="" aria-expanded="false" class="if country-select" aria-controls="ids-phonenumber-suggestions-_9ocp204q9">
          <span class="if flag-indicator icon flag ee" role="presentation"></span>
          <span class="if country-code" role="presentation">+372</span>
        </button>
        <ul class="if countries" role="listbox" aria-label="List of countries" tabindex="-1" style="top: 47px;">
          <li data-rel="47" data-country-iso="NO" role="option" aria-setsize="245" aria-posinset="1" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon no">
            </span>
            <span class="if country-name">Norge</span>
          </li>
          <li data-rel="46" data-country-iso="SE" role="option" aria-setsize="245" aria-posinset="2" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon se">
            </span>
            <span class="if country-name">Sverige</span>
          </li>
          <li data-rel="45" data-country-iso="DK" role="option" aria-setsize="245" aria-posinset="3" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon dk">
            </span>
            <span class="if country-name">Danmark</span>
          </li>
          <li data-rel="358" data-country-iso="FI" role="option" aria-setsize="245" aria-posinset="4" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon fi">
            </span>
            <span class="if country-name">Finland</span>
          </li>
          <li data-rel="372" data-country-iso="EE" role="option" aria-setsize="245" aria-posinset="5" tabindex="-1" aria-selected="true" class="if is-selected">
            <span class="if flag-indicator flag icon ee">
            </span>
            <span class="if country-name">Estland</span>
          </li>
          <li data-rel="371" data-country-iso="LV" role="option" aria-setsize="245" aria-posinset="6" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon lv">
            </span>
            <span class="if country-name">Latvia</span>
          </li>
          <li data-rel="370" data-country-iso="LT" role="option" aria-setsize="245" aria-posinset="7" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon lt">
            </span>
            <span class="if country-name">Litauen</span>
          </li>
          <li data-rel="44" data-country-iso="GB" role="option" aria-setsize="245" aria-posinset="8" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon gb">
            </span>
            <span class="if country-name">Storbritannia</span>
          </li>
          <li data-rel="7" data-country-iso="RU" role="option" aria-setsize="245" aria-posinset="9" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon ru">
            </span>
            <span class="if country-name">Russland</span>
          </li>
          <li data-rel="299" data-country-iso="GL" role="option" aria-setsize="245" aria-posinset="10" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon gl">
            </span>
            <span class="if country-name">Grønland</span>
          </li></ul>
      </div>
      <input type="tel" class="if input-field phonenumber is-optional" data-lpignore="true">
      <label class="if input-label" id="ids-phonenumber-label-_9ocp204q9">Default</label>
      <div class="if input-error">Please enter a valid phonenumber</div>
    </div>
    <button type="submit" class="if primary button">Submit</button>
  </form></html>

Webcomponent

Install

$ npm install @if-design-system/phonenumber-webcomponent

Or for Yarn:

$ yarn add @if-design-system/phonenumber-webcomponent

Usage

<html class="if" lang="en"><form class="if" autocomplete="off">
    <div class="if input-wrapper">
      <ids-phonenumber></ids-phonenumber>
      <input type="tel" class="if input-field phonenumber is-optional" data-lpignore="true" />
      <label class="if input-label">Default</label>
      <div class="if input-error">Please enter a valid phonenumber</div>
    </div>
    <button type="submit" class="if primary button">Submit</button>
  </form>
  <script src="…phonenumber-webcomponent.umd.js"></script></html>
Open on init

Use data-open to open the component on init.

<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <ids-phonenumber data-open></ids-phonenumber>
    <input type="tel" class="if input-field phonenumber is-optional" data-lpignore="true" />
    <label class="if input-label">Default</label>
    <div class="if input-error">Please enter a valid phonenumber</div>
  </div>
</form>
Please enter a valid phonenumber
Custom locale

Use data-locale to enforce the locale to be used. If nothing is given, we default to the lang-attribute on the html-tag.

<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <ids-phonenumber data-locale="ru"></ids-phonenumber>
    <input type="tel" class="if input-field phonenumber is-optional" data-lpignore="true" />
    <label class="if input-label">Default</label>
    <div class="if input-error">Please enter a valid phonenumber</div>
  </div>
</form>
Please enter a valid phonenumber

Properties

Property Type Description
data-locale String The locale to be used, default is html[lang]
data-open Boolean Open on init

Events

The webcomponent fires a CustomEvent when a phonenumber is valid: ids:phonenumber:valid. The webcomponent fires a Invalid event when a phonenumber is invalid: invalid.

Event Type Description
ids:phonenumber:valid CustomEvent Event fired when phonenumber is valid
invalid Invalid event Event fired when phonenumber is invalid

The payload of the CustomEvent looks something like this:

detail: {
  source: 'IDS_PHONENUMBER',
  type: 'IDS_PHONENUMBER_VALID',
  payload: {
    value: this.telInputElement.value
  }
}
Edit this section

Contact us