Phone Input
Phone input with country dial code selector
Installation
pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/input-phone.json
Usage
Preview
Varianty
default
🇨🇿+420
outline
🇨🇿+420
ghost
🇨🇿+420
underline
🇨🇿+420
Barvy (focus ring)
primary
🇨🇿+420
blue
🇨🇿+420
green
🇨🇿+420
red
🇨🇿+420
orange
🇨🇿+420
secondary
🇨🇿+420
Velikosti
xs
🇨🇿+420
sm
🇨🇿+420
md
🇨🇿+420
lg
🇨🇿+420
Rádiusy
none
🇨🇿+420
sm
🇨🇿+420
md
🇨🇿+420
lg
🇨🇿+420
full
🇨🇿+420
S labelem
🇨🇿+420
Disabled
🇨🇿+420
Import
import { PhoneInput, FormPhoneInput } from "@/registry/cs/ui/input-phone/input-phone"
Example
// Základní
<FormPhoneInput
label="Telefonní číslo"
placeholder="123 456 789"
/>
// Varianty: default | outline | ghost | underline
<PhoneInput variant="outline" />
// Barva focus ringu: primary | secondary | blue | green | red | orange
<PhoneInput color="blue" />
// Velikosti: xs | sm | md | lg | xl
<PhoneInput size="lg" />
// Zaoblení: none | xs | sm | md | lg | full | xl
<PhoneInput radius="full" />
// Použití ve formuláři (server action)
<FormPhoneInput
label="Telefon"
name="phoneLocal"
dialCodeName="phoneDialCode"
fullPhoneName="phone"
defaultDialCode="+420"
/>
// backend: formData.get("phone") => "+420777123456"
// Callback
<PhoneInput
onFullPhoneChange={(full, { dialCode, phone }) => {
console.log(full) // => "+420777123456"
}}
/>
Dependencies
https://registry.ceskysoftware.cz/r/utils.json (registry)