Components
PhoneInput
International phone field with a country selector that formats numbers as you type.
PhoneInput is a styled wrapper over react-international-phone that pairs a
country selector with a number field and formats the value for the chosen
country as you type. It is controlled — pass value and onChange, where
onChange receives the formatted phone string. Set defaultCountry (an ISO
2-letter code) to pick the starting country.
Example
Preview
import { PhoneInput } from '@officina/ui';
import { useState } from 'react';
function Example() {
const [phone, setPhone] = useState('');
return <PhoneInput value={phone} onChange={setPhone} defaultCountry="us" />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | — | Marks the field invalid for validation styling and `aria-invalid`. |