PhoneInput

Borders · src/components/PhoneInput/PhoneInput.tsx

A phone number: the country, and the number as it is written at home.

The person writes what they would say. E.164 is computed for them, which is what gets stored - a number kept in local form cannot be dialled from anywhere else, and the trunk zero is the part that breaks it.

Not one free field with a "digits only, no spaces, include country code" hint. That hint is a form asking a person to do the work the form could do, and it is where most numbers get entered wrong.

Import

import { PhoneInput } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
id	string
label	React.ReactNode
hint	React.ReactNode
country	string	Default country when the value carries none.
countries	string[]	Which countries to offer.
countryLabel	string
value	PhoneValue
error	React.ReactNode
className	string
onChange	(value: PhoneValue) => void

Exported types

PhoneValue