94 Pro components and page blocks

Get Pro
uibrik

Phone Input

Pro

Preview

Customize

United States
Radius12px

Installation

Pro

Phone Input is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/phone-input

Usage

import { PhoneInput } from "@/components/uibrik/phone-input/phone-input";​const countries = [  { iso: "AR", name: "Argentina", dial: "54", format: "## ####-####", trunk: true },  { iso: "AU", name: "Australia", dial: "61", format: "### ### ###", trunk: true },  // …47 more];​<PhoneInput  defaultCountry="US"  detect  showDial  showExample  radius={12}  countries={countries}  preferred={["US", "GB", "IN"]}  label="Phone number"  onChange={(value) => {}}  // country="…"  // onCountryChange={(iso) => {}}  // defaultValue="…"  // disabled={false}/>

Props

PhoneInput
defaultCountry
Type "US" | "GB" | "IN" | "DE" | "BR" | "JP"
"US"
Country on mount when uncontrolled.
detect
Type boolean
true
Switch country when a number starting with + is typed or pasted.
showDial
Type boolean
true
Show the dial code beside the flag.
showExample
Type boolean
true
Use the country's format, with sample digits, as the placeholder.
radius
Type number
12
Corner radius of the field.
onChange
Type (value: PhoneValue) => void
–
Called on every edit with { country, national, e164, complete }.
country / onCountryChange
Type string / (iso) => void
–
Controlled country, as an ISO code.
defaultValue
Type string
–
A starting number, national or "+…". Read once on mount.
countries
Type { iso; name; dial; format; trunk? }[]
COUNTRIES
Countries to offer. `format` uses # per digit; `trunk` drops a typed leading 0.
preferred
Type string[]
–
ISO codes pinned to the top of the list, e.g. ["US", "GB"].
label
Type string
"Phone number"
Accessible name.
disabled
Type boolean
false
Grey the field out.
className
Type string
–
Classes for the field.