# Field: Phone (category: special)

URL: https://docs.forms.saastro.io/docs/phone

<FieldPreview name="phone" description="International phone input" />

## Overview

`phone` is a country `<select>` (ISO code + dial code) paired with a national-number `<input type="tel">`. The dial code and number are combined into a single E.164 value on every change.

This is distinct from a plain `tel` [text field](/docs/fields/text): `phone` manages the country prefix for you.

## Value

The submitted value is a single **E.164 string** (`valueKind: 'string'`), e.g. `"+34612345678"`. An existing E.164 value is best-effort parsed back to pre-fill the controls.

## Usage

```tsx

const config = FormBuilder.create('contact')
  .addField('phone', (f) =>
    f.type('phone').label('Phone number').prop('defaultCountry', 'US'),
  )
  .addStep('main', ['phone'])
  .build();
```

`defaultCountry` (and `countries`) have no fluent method — set them with `.prop()`.

## Props

| Prop             | Type                                                       | Default       | Description                       |
| ---------------- | ---------------------------------------------------------- | ------------- | --------------------------------- |
| `defaultCountry` | `string`                                                   | `'US'`        | ISO country code preselected      |
| `countries`      | `Array<{ code: string; dialCode: string; name: string }>`  | bundled list  | Override the selectable countries |
| `placeholder`    | `string`                                                   | –             | National-number input placeholder |