> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Selettore del Paese del telefono > Un selettore completo del paese telefonico e parti componibili che condividono dati sui paesi e selezione. ## Panoramica `PhoneCountryPicker` combina un attivatore con bandiera del paese, popup, ricerca e scelte del prefisso telefonico. Usa il componente completo per la selezione ordinaria oppure componi `Root`, `Trigger` e `Options` con [Dropdown](https://docs.twenty.com/it/ui/components/navigation/dropdown.md) quando ti serve un popup personalizzato. Entrambe le forme condividono gli stessi paesi preparati e la stessa selezione. **Light** [Selezione del paese telefonico (light)](https://storybook.twenty.com/iframe.html?id=ui-input-phonecountrypicker--display\&viewMode=story\&globals=colorScheme:light) **Dark** [Selezione del paese telefonico (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-phonecountrypicker--display\&viewMode=story\&globals=colorScheme:dark) [Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-phonecountrypicker--display) ## Utilizzo Fornisci i tuoi dati sui paesi e un nome accessibile per l'attivatore. Usa `value` con `onValueChange` per una selezione controllata oppure `defaultValue` per una selezione non controllata. `null` rappresenta l'assenza di un paese selezionato. ```tsx theme={null} 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('FR'); return ( ); }; ``` Ogni `PhoneCountryOption` ha un `value` stabile univoco, un `label` del paese localizzato, un `callingCode` composto solo da cifre senza il segno più iniziale e un nodo `flag` decorativo. Può anche essere `disabled`. I valori sono identificatori di proprietà del chiamante, come i codici paese ISO, e vengono restituiti invariati. Etichette, bandiere e prefissi telefonici sono dati di presentazione e non diventano l'identificatore selezionato. Il selettore aggiunge il segno più e isola i prefissi telefonici da sinistra a destra nelle righe delle opzioni e nei tooltip di overflow, incluse le interfacce da destra a sinistra. Fornisci i paesi nell'ordine in cui desideri visualizzarli. Il paese selezionato appare per primo finché corrisponde alla query; le restanti corrispondenze mantengono l'ordine fornito. ## Composizione composta Questa è una modifica API incompatibile per gli utilizzatori esistenti della composizione composta. Aggiungi `PhoneCountryPicker.Root` attorno a `Dropdown.Root`, sposta `countries`, `value` e `onValueChange` da `Options` a `Root` e rimuovi `Trigger.country`. Entrambe le parti ora richiedono `Root` e ne derivano il paese selezionato. `Root` gestisce i paesi e la selezione controllata o non controllata. Inserisci al suo interno il `Dropdown.Root` condiviso e componi l'attivatore, il contenuto e le opzioni. `Trigger` deriva la bandiera selezionata e la descrizione accessibile da `Root`; `Options` legge gli stessi dati e la stessa selezione. Non fornire un altro paese o valore selezionato a tali parti. ```tsx theme={null} 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: '🇬🇧' }, ]; } /> ; ``` Mantieni una radice per selettore. Il Dropdown condiviso gestisce l'apertura, il posizionamento del popup, le pagine, lo stato attivo e la navigazione della ricerca. Usa `dropdownProps` e `contentProps` sul selettore completo oppure configura direttamente le parti Dropdown nell'uso composto. ## Ricerca e selezione La ricerca trova sottostringhe delle etichette dei paesi fornite, degli identificatori stabili e dei prefissi telefonici. Etichette e identificatori usano la normalizzazione condivisa `normalizeSearchText`: testo in minuscolo, decomposizione Unicode NFD e gestione degli accenti consapevole della scrittura. Ad esempio, `reunion` corrisponde a `Réunion` e `gb` corrisponde a un identificatore `GB`. Le distinzioni significative nelle scritture sono preservate in base a tale helper. Gli spazi bianchi attorno alla query vengono rimossi; gli spazi bianchi interni vengono preservati. Per la ricerca del prefisso telefonico, un segno più iniziale è facoltativo, quindi `44`, `+44` e `" +44 "` corrispondono al prefisso telefonico fornito `44`. La ricerca non analizza un numero di telefono completo né ne deduce un paese. `onValueChange(value, eventDetails)` riceve l'identificatore richiesto e i dettagli condivisi di `Dropdown.SelectionGroup`: `reason`, l'`event` nativo, il `trigger` dell'opzione selezionata, `cancel()` e `isCanceled`. Chiama `cancel()` prima di aggiornare lo stato controllato per rifiutare la richiesta. Una richiesta annullata preserva la selezione non controllata e lascia aperto il popup. Imposta `closeOnSelect={false}` per mantenerlo aperto dopo una selezione accettata. Le modifiche alla selezione non modificano alcun valore dell'input telefonico. Imposta `disabled` sul selettore completo o su `Root` per disabilitarne l'attivatore, la ricerca e la selezione. Un paese disabilitato rimane visibile e non può essere selezionato. `Trigger.disabled` e `Options.disabled` possono inoltre disabilitare tali singole parti. ## Destinazioni ed etichette native Gli attributi nativi, i gestori di eventi, `className`, `style`, `ref`, `render` e l'elemento `children` facoltativo del selettore completo si applicano al relativo attivatore. `children` sostituisce la bandiera o l'icona del mondo predefinita e il chevron. `contentProps` si applica a `Dropdown.Content`; `optionsProps` si applica al div radice delle opzioni e fornisce `searchLabel`, `listLabel` e `emptyLabel`. Nell'uso composto, le proprietà native, i riferimenti e la composizione del rendering si applicano al pulsante `Trigger` o al div `Options` corrispondente. `Root` non esegue il rendering di alcun nodo DOM. Fornisci etichette dei paesi localizzate e l'`aria-label` richiesto per l'attivatore. L'etichetta del paese selezionato descrive l'attivatore, mentre la relativa bandiera e il chevron sono decorativi. Una selezione vuota mostra un'icona del mondo. Il popup prende il nome dell'attivatore, a meno che non venga denominato da un `Dropdown.Title` o da un'etichetta esplicita del contenuto. `searchLabel` ha come valore predefinito `Search` e denomina sia il campo di ricerca sia il relativo segnaposto. `listLabel` è impostato per impostazione predefinita su `Countries` e denomina la casella di riepilogo in modo indipendente. `emptyLabel` ha come valore predefinito `No results`. ## Integrazione dell'input telefonico Il selettore viene fornito senza un catalogo di paesi, un pacchetto di risorse per le bandiere o un runtime per input telefonico. L'adattatore frontend gestisce l'analisi, la convalida e la formattazione dei numeri telefonici, le bozze di modifica e la persistenza. Mappa il paese selezionato della libreria telefonica su `Root.value` o sul `value` del selettore completo e rimappa le modifiche del paese tramite un solo callback. Mantieni il testo telefonico nel relativo proprietario esistente quando modifichi o cancelli un paese oppure applichi un aggiornamento esterno del paese selezionato. L'invio e il ripristino nativi del modulo, l'obbligatorietà, la modalità di sola lettura e l'integrazione con Field per questo selettore personalizzato sono rinviati. Il selettore completo inoltra gli attributi nativi dell'attivatore secondo il contratto del pulsante Dropdown. ## Renderer dei componenti front-end I fixture della galleria React e Preact includono il selettore completo e la composizione composta. Il posizionamento del portale, la geometria, lo scorrimento, la chiusura e lo stato attivo appartengono al Dropdown condiviso e all'integrazione del renderer. Il selettore non introduce un runtime del renderer separato. ## Props **aria-label** `string` *required* Required accessible name for the country selector trigger. **children** `ReactNode` Optional trigger content replacing the default country flag or world icon and chevron. **className** `string | ((state: PopoverTriggerState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **closeDelay** `number` (default: 0) How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. **closeOnSelect** `boolean` Closes the dropdown after an accepted selection. Defaults to true. **contentProps** `Omit\` Props for the internally assembled Dropdown.Content, including its accessible name, placement, width and popup ref. **countries** `readonly PhoneCountryOption[]` *required* Prepared choices with a unique stable value, localized label, digits-only calling code without a plus sign, decorative flag node and optional disabled state. Matching choices retain their supplied order after the selected country. **defaultValue** `string | null` Initial uncontrolled country identifier. Omit it or use null to start empty. **delay** `number` (default: 300) How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. **disabled** `boolean` Disables the trigger, search and country selection. **dropdownProps** `Omit\` Props for the internally assembled Dropdown.Root, including controlled open state and open-change events. The picker fixes its type to picker. **id** `string` ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop). **nativeButton** `boolean` (default: true) Whether the component renders a native `