> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Phone

> An international phone element with a country selector.

The `phone` element renders a phone-number input with a country selector. It stores and emits phone numbers in E.164 format.

## Factory

```typescript theme={null}
overflow.phone(options?: PhoneElementOptions): PhoneElement
```

## Example

```javascript theme={null}
const phone = overflow.phone({
  defaultCountry: 'US',
  preferredCountries: ['US', 'CA', 'GB'],
});

phone.on('onChange', ({ complete, value }) => {
  console.log(complete, value);
});

phone.mount('#phone');
```

## Options

| Key                                                                         | Type               | Default                                                       |
| --------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------- |
| `defaultCountry`                                                            | ISO 3166-1 alpha-2 | inferred from shopper locale                                  |
| `onlyCountries`                                                             | `string[]`         | every supported country                                       |
| `preferredCountries`                                                        | `string[]`         | none                                                          |
| `disabled`, `readOnly`, `id`, `ariaLabel`, `locale`, `required`, `validate` | shared             | see [reference](/payment-elements/elements/contact/reference) |
| `fields.phone`                                                              | `BaseFieldOptions` | `{ label: 'Phone' }`                                          |

* `onlyCountries`: restrict the selector to a specific set of countries.
* `preferredCountries`: pin these countries to the top of the selector list; the rest follow alphabetically.

## Value

```typescript theme={null}
type PhoneValue = string | null;
```

Emitted in E.164 format (for example, `'+14155551234'`). `null` until the shopper types a valid number.

## `FieldError.field`

Always `'phone'`.

## Inside Checkout

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    phone: { defaultCountry: 'US', preferredCountries: ['US', 'CA'] },
  },
});
```

## See also

* [Contact introduction](/payment-elements/elements/contact/introduction)
* [Contact reference](/payment-elements/elements/contact/reference)