PhoneCountryPicker

import { useState } from 'react';
import {
  PhoneCountryPicker,
  type PhoneCountryOption,
} from 'twenty-ui/components/input';

const COUNTRIES: PhoneCountryOption[] = [
  { value: 'FR', label: 'France', callingCode: '33', flag: '🇫🇷' },
  { value: 'GB', label: 'United Kingdom', callingCode: '44', flag: '🇬🇧' },
  { value: 'US', label: 'United States', callingCode: '1', flag: '🇺🇸' },
];

export const PhoneCountryExample = () => {
  const [value, setValue] = useState<string | null>('FR');

  return (
    <PhoneCountryPicker
      aria-label="Phone country"
      countries={COUNTRIES}
      value={value}
      onValueChange={setValue}
      contentProps={{ width: 280 }}
      optionsProps={{
        searchLabel: 'Search countries',
        listLabel: 'Phone countries',
        emptyLabel: 'No countries found',
      }}
    />
  );
};

import {
  PhoneCountryPicker,
  type PhoneCountryOption,
} from 'twenty-ui/components/input';
import { Dropdown } from 'twenty-ui/components/navigation';
import { Button } from 'twenty-ui/primitives/input';

const COUNTRIES: PhoneCountryOption[] = [
  { value: 'FR', label: 'France', callingCode: '33', flag: '🇫🇷' },
  { value: 'GB', label: 'United Kingdom', callingCode: '44', flag: '🇬🇧' },
];

<PhoneCountryPicker.Root countries={COUNTRIES} defaultValue="FR">
  <Dropdown.Root type="picker">
    <PhoneCountryPicker.Trigger
      aria-label="Phone country"
      render={<Button variant="outline" />}
    />
    <Dropdown.Content width={320}>
      <PhoneCountryPicker.Options
        searchLabel="Search countries"
        listLabel="Phone countries"
        emptyLabel="No countries found"
      />
    </Dropdown.Content>
  </Dropdown.Root>
</PhoneCountryPicker.Root>;