PhoneField | Arbol UI

Language

Appearance

With a default country

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

Contact phone

The agent calls and writes to this number.

Stored as: —

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

Mobile

This number already belongs to another contact.

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, which the library’s tests render too.