Component
PhoneInput
Collects an international phone number with a country selector and live formatting.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/phone-inputExamples
Live previews render through the docs app's PandaCSS codegen.
<PhoneInput aria-label="Phone number" defaultCountry="us" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `value` | `string` | No | - | Phone value in E.164 format (controlled). |
| `defaultCountry` | `CountryIso2` | No | - | Initial country (ISO alpha-2), used until a number implies another. |
| `onChange` | `(phone: string) => void` | No | - | Called with the E.164 phone string on every change. |
| `countryLabel` | `string` | No | - | Accessible label for the country selector. |
| `size` | `InputSize` | No | - | - |
| `invalid` | `boolean` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/phone-input.json`
- Recipe: ``
- Files: `src/components/ui/phone-input.tsx`