Phone Input - HapplyUI

A phone input component with country selection and automatic formatting.

Installation

bunx @happlyui/cli@latest add phone-input

Dependencies

npm packages

react-international-phone
libphonenumber-js

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
input
select

Usage

import * as PhoneInput from "@/components/ui/phone-input"

<PhoneInput.Root onValueChange={(e164) => console.log(e164)} />

Examples

Default

Phone input with default country (Canada).

<PhoneInput.Root onValueChange={(e164) => console.log(e164)} />

Controlled

Fully controlled phone input with value and country.

Value: — | Country: us

<PhoneInput.Root
  value={value}
  onValueChange={setValue}
  country={country}
  onCountryChange={setCountry}
/>

Sizes

All three input sizes: medium (default), small, and xsmall.

<PhoneInput.Root size="medium" />
<PhoneInput.Root size="small" />
<PhoneInput.Root size="xsmall" />

Error State

Phone input in error state.

<PhoneInput.Root hasError />

Disabled

Phone input in disabled state.

<PhoneInput.Root disabled />

With Form Field

Phone input composed with FormField for consistent label and hint.

Phone Number*

Enter your phone number.

<FormField.Root
  label="Phone Number"
  htmlFor="phone"
  required
  hint="Enter your phone number."
>
  <PhoneInput.Root id="phone" />
</FormField.Root>

API Reference

PhoneInput.Root

The composed phone input component. Forwards ref to the underlying input element.

Prop	Type	Default	Description
`value`	`string`	-	Phone value in E.164 format (controlled).
`onValueChange`	`(e164: string) => void`	-	Callback when value changes.
`country`	`CountryIso2`	-	Controlled country ISO2 code.
`defaultCountry`	`CountryIso2`	`'ca'`	Default country to select.
`onCountryChange`	`(iso2: CountryIso2) => void`	-	Callback when country changes.
`preferredCountries`	`CountryIso2[]`	`['ca', 'us', 'fr']`	Countries shown at the top of the dropdown.
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Size variant.
`hasError`	`boolean`	-	Whether the input has an error state.
`disabled`	`boolean`	-	Whether the input is disabled.