Phone number input¶

Usage¶

When to use¶

• For allowing users to enter or update a phone number.
• When validation and formatting of international phone numbers are required.

Best practices¶

• Ensure the input field is wide enough to accommodate different international phone number formats.
• Use smart defaults, such as showing the country code and phone number format based on the user's location.
• When collecting non-phone number data, a standard input component should be used.

Design¶

Elements¶

1. Label (optional) 2. Content/placeholder text, 3. Container, 4. Menu, 5. Country code with flag.

Label (optional)¶

Effective form labeling helps users understand what information to enter.

• Keep labels short and clear (should not be wider than the input field).
• A mandatory field is marked with an *-asterisk.

Interaction states¶

Validation¶

Real-time validation ensures that the data being entered is within a specific range or follows certain rules, preventing errors and ensuring the integrity of the data.

Code¶

Usage¶

import { SiPhoneNumberInputComponent } from '@siemens/element-ng/phone-number';

@Component({
  imports: [SiPhoneNumberInputComponent, ...]
})

• Ensure to import the node_modules/flag-icons/css/flag-icons.css to the angular.json styles configuration as follows:

          "styles": [
              "node_modules/flag-icons/css/flag-icons.css",
              ...
          ]

• Set the supportedCountries input array to define the available list of countries. The countries are defined in ISO-3166-2 format.
• To display all the available countries, don't add supportedCountries input.
• Use the defaultCountry ISO-3166-2 input to select a default.
• Set validatePhoneNumber input to enable a validation service and show status information in the form control.
• Use the placeholderForSearch input for a custom placeholder text of the country search.
• The selectCountryAriaLabel input sets the ARIA label for the country dropdown.
• The phoneNumberAriaLabel input sets the ARIA label for the phone number input.
• All changes are emitted through the valueChange output.

SiPhoneNumberInputComponent API Documentation¶

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Input Properties¶

Output Properties¶

Types Documentation¶

labelWidth="100px"

labelWidth="100px".