Phone Input

A text input component for entering international telephone numbers. Based on the ReactPhoneNumberInput.

Source

Installation

npx @rahimstack@latest add phone-input

Usage

Uncontrolled

  • Input type: tel
  • Value type: string
  • The selected country will also be submitted as a separate field of name {input_name}_country.

API Reference

const PhoneInputAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-PhoneInput__root",
        "rounded-l-none z-[2]",
    ]),
    container: cva([
        "UI-PhoneInput__container",
        "relative flex items-center w-full",
    ]),
    countrySelect: cva([
        "UI-PhoneInput__countrySelect",
        "w-[3rem] z-[3] relative flex-none cursor-pointer truncate rounded-r-none border-r-transparent opacity-0",
        "focus-visible:opacity-100 transition duration-200 ease-in-out",
    ], {
        variants: {
            hasLeftAddon: {
                true: "rounded-l-none",
                false: null,
            },
        },
    }),
    flagSelect: cva([
        "UI-PhoneInput__flagSelect",
        "absolute top-0 left-0 w-[3rem] z-[0] flex-none cursor-pointer truncate rounded-r-none border-r-0",
    ], {
        variants: {
            hasLeftAddon: {
                true: "rounded-l-none border-l-0",
                false: null,
            },
        },
    }),
    flagImage: cva([
        "UI-PhoneInput__flagImage",
        "w-6 absolute h-full inset-y-0 z-[0]",
    ]),
})