# Maschere per numeri di telefono

Una maschera per il telefono formatta mentre si digita e tiene il numero in un valore separato: il dato salvato non contiene spazi né trattini.

> Pagina: https://ui.eneawork.it/blog/input-mask-telefono
> Markdown: https://ui.eneawork.it/blog/input-mask-telefono.md

*2026-11-01*

Una maschera per il telefono formatta mentre si digita e tiene il numero completo in un valore separato: il dato salvato non deve contenere spazi, trattini o prefissi ambigui.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## Formattare non è validare

La maschera decide dove vanno gli spazi; la validazione decide se il numero può esistere. Un campo che mostra +39 333 123 4567 può comunque avere una lunghezza sbagliata, quindi i due controlli restano separati.

function formatItalianPhone(raw) { const digits = raw.replace(/\D/g, "").slice(0, 13); if (digits.length <= 3) return digits; if (digits.length <= 6) return digits.slice(0, 3) + " " + digits.slice(3); return digits.slice(0, 3) + " " + digits.slice(3, 6) + " " + digits.slice(6); }

La raccomandazione ITU-T E.164 limita un numero internazionale a 15 cifre e ammette il prefisso +: è il formato da salvare, mentre la formattazione resta nel componente. Va verificata su almeno un numero italiano e uno estero, perché la lunghezza cambia.

## Tre trappole

## Una dipendenza con licenza

npm install react-imask

react-imask, distribuito con licenza MIT, applica la maschera sull'input nativo e restituisce il valore non formattato: la funzione scritta a mano resta utile quando la dipendenza è troppo.

## Record vivi nel catalogo

Tre campi con formattazione: otp-input, otp-verify e credit-card-form. Per sfogliare per categoria parti da 111.985 componenti.

## La limitazione

Nessuna maschera conosce i prefissi attivi: un numero può rispettare il formato e non esistere. La prova vera è un SMS o una chiamata, e finché non arriva il campo va trattato come non confermato.

## Dove continuare

La scelta della libreria è in librerie form React; il controllo dei campi è in react-hook-form con shadcn; il confronto fra campo controllato e non controllato è in form controllati e non.

## FAQ

### Devo salvare il numero con gli spazi?

No, si salvano solo le cifre con il prefisso internazionale. Gli spazi servono a leggere, non a identificare il numero.

### Meglio scrivere la maschera o installarla?

Per un solo formato basta una funzione di poche righe. Con più paesi conviene react-imask, distribuito con licenza MIT.

### Perché il cursore salta a fine campo?

Perché il valore viene riscritto a ogni tasto e la posizione del cursore si perde. Va ricalcolata o delegata alla libreria.

### Il prefisso +39 va mostrato?

Sì se il pubblico è internazionale, perché chiarisce il paese. Con un pubblico solo italiano si può mostrare come testo fisso accanto al campo.

### La maschera controlla che il numero esista?

No, controlla solo la forma. L'esistenza si prova con un SMS o una chiamata.