---
title: "PhoneField"
description: "A phone number with its country: a searchable country list beside a box that groups the digits. The value is always the international form, such as +573001234567."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PhoneField

## With a default country

Local digits take the country’s code; typing a plus picks the country from the number.

```tsx
import { useState } from 'react';
import { PhoneField } from '@arbol-ai/ui';

const ContactExample = () => {
  const [phone, setPhone] = useState('');
  return (
    <div className="grid max-w-xs gap-2">
      <PhoneField
        defaultCountry="CO"
        description="The agent calls and writes to this number."
        label="Contact phone"
        onChange={setPhone}
        priorityCountries={['CO', 'MX', 'US']}
        value={phone}
      />
      <p className="text-muted-foreground text-sm">Stored as: {phone === '' ? '—' : phone}</p>
    </div>
  );
};

<ContactExample />
```

## Invalid

```tsx
import { PhoneField } from '@arbol-ai/ui';

<PhoneField
  className="max-w-xs"
  defaultCountry="MX"
  defaultValue="+525512345678"
  errorMessage="This number already belongs to another contact."
  isInvalid
  label="Mobile"
/>
```

## Source

The examples above are [`src/components/phone-field/phone-field.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/phone-field/phone-field.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/pickers/phone-field/index.mdx