Import
import { InputPhoneModule } from '@backbase/ui-ang/input-phone'
Usage
Use the bb-input-phone-ui component to capture phone numbers with optional country selection and masking.
<!-- Basic input phone usage -->
<bb-input-phone-ui
label="Phone number"
placeholder="e.g., +1 555 123 4567">
</bb-input-phone-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
'tel' | 'on' | 'off' |
'tel' (token overrideable) |
|
autofocus |
boolean |
false |
|
clearable |
boolean |
false |
|
countryList |
CountryList |
undefined |
|
defaultCountryIsoCode |
string |
undefined |
|
disabled |
boolean |
false |
|
dropdownPosition |
'bottom' | 'top' | 'auto' |
undefined |
|
enableCountryCode |
boolean |
undefined |
|
hideSelectedCountryFlag |
boolean |
false |
|
inputClassName |
string |
undefined |
|
isOpen |
boolean | undefined |
undefined |
|
label |
string |
'' |
|
mask |
string |
undefined |
|
maxLength |
number |
undefined |
|
minLength |
number |
undefined |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
searchable |
boolean |
false |
|
size |
number | string |
20 |
|
validationPattern |
string |
undefined |
Global configuration tokens
You can set defaults for all instances using these tokens:
- INPUT_PHONE_CONFIG_TOKEN:
- maxLength
- minLength
- autocomplete
- mask
- displayFormat
- validationPattern
- hideSelectedCountryFlag
- defaultCountryIsoCode
- countryList
- enableCountryCode
- COUNTRY_CODE_FORMAT_CONFIG_TOKEN, per-country:
- mask
- minLength
- maxLength
import { INPUT_PHONE_CONFIG_TOKEN, COUNTRY_CODE_FORMAT_CONFIG_TOKEN } from '@backbase/ui-ang/input-phone';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const inputPhoneConfig = {
maxLength: 10,
minLength: 5,
autocomplete: 'off',
displayFormat: 'E.164',
};
const countryCodeFormatConfig = {
'+1': { mask: '+0 (000) 000-0000', minLength: 8, maxLength: 12 },
};
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [
{ provide: INPUT_PHONE_CONFIG_TOKEN, useValue: inputPhoneConfig },
{ provide: COUNTRY_CODE_FORMAT_CONFIG_TOKEN, useValue: countryCodeFormatConfig },
],
});
autocomplete
The autocomplete input sets the browser autocomplete attribute for the phone input. Defaults to 'tel' (can be overridden via token).
<!-- Input phone with autocomplete off -->
<bb-input-phone-ui
autocomplete="off"
label="Phone number">
</bb-input-phone-ui>
autofocus
The autofocus input determines whether the input should be automatically focused when rendered. Defaults to false.
<!-- Input phone with autofocus enabled -->
<bb-input-phone-ui
[autofocus]="true"
label="Phone number">
</bb-input-phone-ui>
clearable
The clearable input allows clearing the selected value. Defaults to false.
<!-- Input phone with clear action enabled -->
<bb-input-phone-ui
[clearable]="true"
label="Phone number">
</bb-input-phone-ui>
countryList
The countryList input provides a list of countries for the dropdown. Can be set globally via token.
<!-- Input phone with a restricted country list -->
<bb-input-phone-ui
[countryList]="[{ isoCode: 'US', countryName: 'United States', countryCode: '+1' }]"
label="Phone number">
</bb-input-phone-ui>
defaultCountryIsoCode
The defaultCountryIsoCode input sets the default selected country in the dropdown.
<!-- Input phone with default country set to US -->
<bb-input-phone-ui
defaultCountryIsoCode="US"
label="Phone number">
</bb-input-phone-ui>
disabled
The disabled input disables the phone input when set to true. Defaults to false.
<!-- Disabled input phone -->
<bb-input-phone-ui
[disabled]="true"
label="Phone number">
</bb-input-phone-ui>
dropdownPosition
The dropdownPosition input controls the country dropdown position 'bottom', 'top', or 'auto').
<!-- Input phone with dropdown opening at the top -->
<bb-input-phone-ui
dropdownPosition="top"
label="Phone number">
</bb-input-phone-ui>
enableCountryCode
The enableCountryCode input toggles whether the value excludes the country code (keeps number only). Can be configured globally.
<!-- Input phone storing number without country code -->
<bb-input-phone-ui
[enableCountryCode]="true"
label="Phone number">
</bb-input-phone-ui>
hideSelectedCountryFlag
The hideSelectedCountryFlag input hides the selected country flag in the dropdown. Defaults to false.
<!-- Input phone without displaying the selected country flag -->
<bb-input-phone-ui
[hideSelectedCountryFlag]="true"
label="Phone number">
</bb-input-phone-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Input phone with a custom class -->
<bb-input-phone-ui
inputClassName="my-custom-class"
label="Phone number">
</bb-input-phone-ui>
isOpen
The isOpen input allows manual control of the country dropdown opening and closing. true keeps it open; false prevents opening. Defaults to undefined.
<!-- Input phone with dropdown forced open -->
<bb-input-phone-ui
[isOpen]="true"
label="Phone number">
</bb-input-phone-ui>
label
The label input sets the label for the input. Defaults to an empty string.
<!-- Input phone with a label -->
<bb-input-phone-ui label="Phone number"></bb-input-phone-ui>
mask
The mask input sets an input mask for phone numbers. Can be set globally or per country via tokens.
<!-- Input phone with a custom mask -->
<bb-input-phone-ui
mask="+0 (000) 000-0000"
label="Phone number">
</bb-input-phone-ui>
maxLength
The maxLength input sets the maximum number of characters allowed (excluding country code when enabled). Can be set via token.
<!-- Input phone with maximum length -->
<bb-input-phone-ui
[maxLength]="12"
label="Phone number">
</bb-input-phone-ui>
minLength
The minLength input sets the minimum number of characters required (excluding country code when enabled). Can be set via token.
<!-- Input phone with minimum length -->
<bb-input-phone-ui
[minLength]="8"
label="Phone number">
</bb-input-phone-ui>
placeholder
The placeholder input sets the placeholder text for the input. Defaults to an empty string.
<!-- Input phone with a placeholder -->
<bb-input-phone-ui
placeholder="e.g., +1 555 123 4567"
label="Phone number">
</bb-input-phone-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only input phone -->
<bb-input-phone-ui
[readonly]="true"
label="Phone number">
</bb-input-phone-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required input phone -->
<bb-input-phone-ui
[required]="true"
label="Phone number">
</bb-input-phone-ui>
searchable
The searchable input toggles searching within the country dropdown. Defaults to false.
<!-- Input phone with searchable dropdown -->
<bb-input-phone-ui
[searchable]="true"
label="Phone number">
</bb-input-phone-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Input phone with a custom size -->
<bb-input-phone-ui
[size]="30"
label="Phone number">
</bb-input-phone-ui>
validationPattern
The validationPattern input applies a custom pattern for validation. Can be set via token.
<!-- Input phone with a validation pattern -->
<bb-input-phone-ui
validationPattern="^\\+?[0-9 ]+$"
label="Phone number">
</bb-input-phone-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the input loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the input gains focus |
|
valueChange |
EventEmitter<ValueSet> |
Emitted with { countryCode, isoCode, countryName, number } on change |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget (defaults to include country code description when dropdown is disabled) |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |