Viora LogoViora UI
Login

Phone Input

An international phone number input with country selection.

demo-phone-input-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add phone-input
npx viora-ui add phone-input
yarn viora-ui add phone-input
bunx --bun viora-ui add phone-input

Usage

import { PhoneInputDemo } from "viora-ui";
import { PhoneInputDemo } from "viora-ui";

export default function PhoneInputDemoDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <PhoneInputDemo />
    </div>
  );
}

API Reference

CountryEntry

PropTypeDefaultDescription
labelstring-Configuration for label.

CountrySelect

PropTypeDefaultDescription
disabled?booleanfalseWhether the component is disabled.
valueRPNInput.Country-Configuration for value.
optionsCountryEntry[][]Configuration for options.
onChange(country: RPNInput.Country) => void-Callback fired on change event.

CountrySelectOption

PropTypeDefaultDescription
selectedCountryRPNInput.Country-Configuration for selectedCountry.
onChange(country: RPNInput.Country) => void-Callback fired on change event.
onSelectComplete() => void-Callback fired on selectcomplete event.

Built by Otis

Last updated: 9/13/2026