salla-tel-input
A mobile number field with a country flag dropdown and the dial code shown beside it.
A mobile number field with a country flag dropdown and the dial code shown beside it. Use it in
forms that need a phone number, such as sign up, checkout or product availability alerts. It only
accepts digits, shows an inline error message when isValid() finds a problem, and renders a hidden
country_code input next to the number input, so both values submit with a normal form. A few
countries are excluded from the list (Syria, Iran, Cuba and North Korea) and Gulf and Arab countries are listed first.
Use it
In HTML or JSX, use the tag <salla-tel-input> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaTelInput } from '@salla.sa/twilight-components-react/tel-input';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Try it
Example
import { SallaTelInput } from '@salla.sa/twilight-components-react/tel-input';
export function Example() {
return (
<form>
<SallaTelInput name="mobile" countryCode="SA" />
</form>
);
}const input = document.querySelector('salla-tel-input');
if (await input.isValid()) {
const { mobile, countryCode, countryKey } = await input.getValues();
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autofocus | autofocus | Automatically focus telephone input once it is ready. | boolean | |
countryCode | country-code | Selected country as a two-letter ISO country code, for example SA (not the dial code). It sets the initial flag and is updated when the visitor picks another country. Defaults to the logged-in user's country, or SA. | string | salla.config.get('user.country_code', 'SA') || 'SA' |
disabled | disabled | Disables the number input. | boolean | false |
name | name | The name of the number input, used as the form field name and as the key of the number in the object returned by getValues(). | string | 'phone' |
phone | phone | Current mobile number, digits only, without the dial code. Use it to prefill the field. | string |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
phoneEntered | Fires each time the visitor types in the number or picks another country. event.detail is { number, country_code }, where number is the typed digits and country_code is the two-letter ISO country code. | Phone |
Methods
Call these on the element or a React ref.
getValues() => Promise<{ [x: string]: any; countryCode: string; countryKey: any; }>
Get current values
Returns Promise<{ [x: string]: any; countryCode: string; countryKey: any; }>: A Promise that resolves to an object with the number under the key given by the name prop (default phone), countryCode (two-letter ISO code such as SA) and countryKey (the dial code shown in the field, such as +966).
isValid() => Promise<boolean>
Checks the number for the selected country and shows an inline error message when it is not valid.
Returns Promise<boolean>: A Promise that resolves to true when the number is valid and false when it is not. It resolves to undefined (also an invalid result) when the field is empty.
Related
Used inside: <salla-gifting>, <salla-product-availability>, <salla-quick-order>, <salla-user-profile>.