Phoneinput

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Base UI.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download phone-input -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { PhoneInput } from "@/components/ui/phone-input";
import * as React from "react";
export default function PhoneInputExample() {
  const [value, setValue] = React.useState("+393331234567");
  return (
    <PhoneInput
      disabled={false}
      value={value}
      onValueChange={(value) => setValue(value ?? "")}
    />
  );
}

Props API

Prop	Type	Required
`country`	`string`	No
`countryName`	`string`	No
`value`	`string`	No
`countryCode`	`CountryCode`	No
`placeholder`	`string`	No
`preferredCountries`	`CountryCode[]`	No
`ignoredCountries`	`CountryCode[]`	No
`onlyCountries`	`CountryCode[]`	No
`translations`	`Partial<Translations>`	No
`noUseBrowserLocale`	`boolean`	No
`fetchCountry`	`boolean`	No
`noCountrySelector`	`boolean`	No
`customCountriesList`	`Record<CountryCode, string>`	No
`autoFormat`	`boolean`	No
`noFormattingAsYouType`	`boolean`	No
`countryLocale`	`string`	No
`selectorComponent`	`React.ReactNode`	No
`inputComponent`	`React.ReactNode`	No
`onValueChange`	`(value: string) => void`	No
`onCountryCodeChange`	`(countryCode?: CountryCode) => void`	No
`onUpdate`	`(results: Results) => void`	No
`defaultValue`	`string`	No
`disabled`	`boolean`	No
`flags`	`boolean`	No
`flagsPosition`	`"all" \| "popoverOnly"`	No

Subcomponents

FlagComponent
PhoneInputWrapper
PhoneInput

Examples

Default

import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput onValueChange={() => undefined} />;

With Value

import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput value="+393331234567" onValueChange={() => undefined} />;

Disabled

import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput value="+393331234567" disabled onValueChange={() => undefined} />;

Default Country

import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput countryCode="US" onValueChange={() => undefined} />;

Flags In Popover

import { PhoneInput } from "@/components/ui/phone-input";
<PhoneInput flagsPosition="popoverOnly" onValueChange={() => undefined} />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

FlagComponent

Prop	Type	Default	Description
`country`	`string`	`—`
`countryName`	`string`	`—`

Prop	Type	Default	Description
`countryCode`	`CountryCode`	`—`	Optional CountryCode
`defaultCountry`	`CountryCode`	`—`
`defaultValue`	`string`	`—`	Optional string
`disabled`	`boolean`	`false`	Optional boolean
`flags`	`boolean`	`true`	Optional boolean
`flagsPosition`	`"all" \| "popoverOnly"`	`"all"`	Optional "all" \| "popoverOnly"
`onCountryCodeChange`	`(countryCode?: CountryCode) => void`	`—`	Optional (countryCode?: CountryCode) => void
`onValueChange`	`(value: string) => void`	`—`	Optional (value: string) => void
`value`	`string`	`—`	Optional string

PhoneInputWrapper

Prop	Type	Default
`autoFormat`	`boolean`	`true`
`countryCode`	`CountryCode`	`—`
`countryLocale`	`string`	`—`
`customCountriesList`	`Record<CountryCode, string>`	`—`
`defaultCountry`	`CountryCode`	`"IT" as CountryCode`
`defaultValue`	`string`	`—`
`ignoredCountries`	`CountryCode[]`	`—`
`inputComponent`	`React.ReactNode`	`—`
`noCountrySelector`	`boolean`	`false`
`noFormattingAsYouType`	`boolean`	`false`
`onCountryCodeChange`	`(countryCode?: CountryCode) => void`	`—`
`onlyCountries`	`CountryCode[]`	`—`
`onUpdate`	`(results: Results) => void`	`—`
`onValueChange`	`(value: string) => void`	`—`
`placeholder`	`string`	`—`
`preferredCountries`	`CountryCode[]`	`—`
`selectorComponent`	`React.ReactNode`	`—`
`translations`	`Partial<Translations>`	`—`
`value`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.