# salla-tel-input (https://docs.salla.dev/twilight/react/web-components/salla-tel-input)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
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 [#try-it]

<Demo name="web-components/salla-tel-input" />

## Example [#example]

```tsx
import { SallaTelInput } from '@salla.sa/twilight-components-react/tel-input';

export function Example() {
  return (
    <form>
      <SallaTelInput name="mobile" countryCode="SA" />
    </form>
  );
}
```

```html
<form>
  <salla-tel-input name="mobile" country-code="SA"></salla-tel-input>
</form>
```

```ts
const input = document.querySelector('salla-tel-input');
if (await input.isValid()) {
  const { mobile, countryCode, countryKey } = await input.getValues();
}
```

## Properties [#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 [#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 [#methods]

Call these on the element or a React ref.

### `getValues() => Promise<{ [x: string]: any; countryCode: string; countryKey: any; }>` [#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>` [#isvalid--promiseboolean]

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 [#related]

Used inside: [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting), [`<salla-product-availability>`](https://docs.salla.dev/twilight/react/web-components/salla-product-availability), [`<salla-quick-order>`](https://docs.salla.dev/twilight/react/web-components/salla-quick-order), [`<salla-user-profile>`](https://docs.salla.dev/twilight/react/web-components/salla-user-profile).