React Phone Input - Flowbite

Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes

The phone number input component from Flowbite React can be used to set a phone number inside a form field by using the native type="tel" attribute.

The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.

To start using the component make sure that you have imported it from Flowbite React:

import { PhoneInput } from "flowbite-react";

Default phone input#

Get started with the following phone input example with default type as type="tel".

Edit on GitHub
"use client";

import { PhoneInput } from "flowbite-react";

function Component() {
    return (
        <form className="max-w-sm mx-auto">
            <PhoneInput />
        </form>
    )
}

Example with Helper Text#

Edit on GitHub

Select a phone number that matches the format.

"use client";

import { PhoneInput } from "flowbite-react";

function Component() {
    return (
        <form className="max-w-sm mx-auto">
            <PhoneInput helperText="Select a phone number that matches the format." />
        </form>
    )
}

Example with Icon on the right#

Edit on GitHub

Select a phone number that matches the format.

"use client";

import { PhoneInput } from "flowbite-react";

function Component() {
    return (
        <form className="max-w-sm mx-auto">
            <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt}/>
        </form>
    )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "relative",
    "input": {
      "base": "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
      "startIcon": {
        "base": "pointer-events-none absolute inset-y-0 start-0 top-0 flex items-center ps-3.5",
        "icon": "h-4 w-4 text-gray-500 dark:text-gray-400"
      },
      "rightIcon": {
        "base": "pointer-events-none absolute inset-y-0 end-3 top-0 flex items-center ps-3.5",
        "icon": "h-4 w-4 text-gray-500 dark:text-gray-400"
      },
      "sizes": {
        "sm": "p-2 sm:text-xs",
        "md": "p-2.5 text-sm",
        "lg": "p-4 sm:text-base"
      }
    }
  }
}

References#