Phone Field

Name: Phone Field
Availability: InStock
Author: ScottEAdams

Adds a phone number field to Payload collections with country-code selection and validation, powered by react-phone-number-input.

Community 12 14/wk MIT v1.0.6

Installation

$ pnpm add payload-plugin-phone-field

About

The plugin ships a `phoneField()` factory you drop into any collection's `fields` array. It returns a Payload `TextField` whose admin UI is replaced with `react-phone-number-input`, so editors get a country picker and a formatted national-number input instead of a plain text box. Two validation helpers are exported: `phoneIsValid` and `phoneIsPossible`. The first checks that a number matches a real assigned range for its country; the second is a looser check that only verifies the length is plausible. You pass either as the field's `validate` option, or supply your own. The factory accepts all standard `TextField` options (name, label, required, validate, admin config) as its first argument, plus any `react-phone-number-input` `FeatureProps` as the second. That second argument is where you constrain the country list, set a default country, or tweak formatting. It targets Payload 1.x (peer dep `payload ^1.1.18`) and is written in TypeScript. Stored values are E.164 strings, which work well for downstream SMS or call integrations.