PhoneInput

Phone number input with an integrated country selector, built on react-phone-number-input; emits E.164-formatted values via onChange.

Usage

import { E164Number, PhoneInput, PhoneInputProps } from "@instruments/materia-ui/components/phone-input";

onChange emits an E.164 string (e.g. +15550000000) or undefined while the number is incomplete/cleared - store that shape, don't reformat the raw text yourself.
Set defaultCountry (ISO alpha-2, default "US") for the initial calling code; the integrated country selector then lets users switch.
Validate the emitted E.164 value (e.g. via react-phone-number-input's isValidPhoneNumber) rather than regex-matching the display text.

Prop	Type	Description
radius	`"rounded" \| "full" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`
value	`string`	Current phone number value
onChange	`(value: E164Number \| undefined) => void`	Callback when phone number changes
hasError	`boolean`	Show error styling
className	`string`	Additional class name for the container
disabled	`boolean`	Disabled state
defaultCountry	`import("libphonenumber-js/core").CountryCode`	Default country code (e.g., "US", "GB"). Defaults to "US".
placeholder	`string`	Placeholder text
testId	`string`

Builds on