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 Reka UI.

Installation

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

pnpm exec frontfriend download phone-input -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";
import { reactive } from "vue";

const args = reactive(
  {
    "disabled": false,
    "flags": true,
    "flagsPosition": "all",
    "value": "+393331234567",
  } satisfies Partial<
    InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" },
);
</script>

<template>
  <PhoneInput v-model="args.value" :disabled="args.disabled" />
</template>

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

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";

const args = {
  "disabled": false,
  "flags": true,
  "flagsPosition": "all",
} satisfies Partial<
  InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" };
</script>

<template>
  <PhoneInput v-bind="args" />
</template>

With Value

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";
import { reactive } from "vue";

const args = reactive(
  {
    "disabled": false,
    "flags": true,
    "flagsPosition": "all",
    "value": "+393331234567",
  } satisfies Partial<
    InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" },
);
</script>

<template>
  <PhoneInput v-model="args.value" />
</template>

Disabled

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";

const args = {
  "disabled": true,
  "flags": true,
  "flagsPosition": "all",
} satisfies Partial<
  InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" };
</script>

<template>
  <PhoneInput v-bind="args" />
</template>

Default Country

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";

const args = {
  "disabled": false,
  "flags": true,
  "flagsPosition": "all",
} satisfies Partial<
  InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" };
</script>

<template>
  <PhoneInput country-code="US" />
</template>

Flags In Popover

<script setup lang="ts">
import { PhoneInput } from "@/components/ui/phone-input";

const args = {
  "disabled": false,
  "flags": true,
  "flagsPosition": "popoverOnly",
} satisfies Partial<
  InstanceType<typeof PhoneInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { flagsPosition?: "all" | "popoverOnly" };
</script>

<template>
  <PhoneInput v-bind="args" />
</template>

API reference

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

FlagComponent

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

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`countryCode`	`CountryCode`	`—`
`defaultCountry`	`CountryCode`	`—`
`defaultValue`	`string`	`—`
`disabled`	`boolean`	`—`
`flags`	`boolean`	`—`
`flagsPosition`	`"all" \| "popoverOnly"`	`—`
`modelValue`	`string`	`—`

PhoneInputWrapper

Prop	Type	Default
`autoFormat`	`boolean`	`—`
`countryCode`	`CountryCode`	`—`
`countryLocale`	`string`	`—`
`customCountriesList`	`Record<CountryCode, string>`	`—`
`defaultCountry`	`CountryCode`	`—`
`defaultValue`	`string`	`—`
`excludeSelectors`	`string[]`	`—`
`ignoredCountries`	`CountryCode[]`	`—`
`modelValue`	`string`	`—`
`noCountrySelector`	`boolean`	`—`
`noFormattingAsYouType`	`boolean`	`—`
`onlyCountries`	`CountryCode[]`	`—`
`placeholder`	`string`	`—`
`preferredCountries`	`CountryCode[]`	`—`
`translations`	`Partial<Translations>`	`—`

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