phone-input.md

layout	title	description	group	requires_js	toc	previous	previousLink	next	nextLink
home	Tailwind CSS Phone Input - Flowbite	Use the phone number input component from Flowbite to set a phone number inside a form field and use a dropdown menu to select the country code based on various styles, sizes and colors	forms	true	true	Number Input	forms/number-input/	Select	forms/select/

The phone number input component from Flowbite can be used to set a phone number inside a form field by using the native type="tel" attribute and also use a dropdown menu to select the country code.

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.

Default phone input

Use this component to set a phone number inside an input field by setting the type="tel" attribute.

{{< example id="default-phone-number-input" github="components/phone-input.md" show_dark=true >}}

Phone number:

Select a phone number that matches the format.

{{< /example >}}

Phone input country code

This example can be used to select the country code from a dropdown menu and set the phone number inside an input field and use the pattern attribute to validate the phone number.

{{< example id="phone-code-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" >}}

+1

• United States (+1)
• United Kingdom (+44)
• Australia (+61)
• Germany (+49)
• France (+33)
• Germany (+49)

Phone number:

{{< /example >}}

Floating label input

Set a phone number inside an input field with a floating label inspired by Material UI from Google.

{{< example id="floating-label-phone-example" github="forms/phone-input.md" show_dark=true >}}

Phone number

{{< /example >}}

Verification code input

Use this example to send a verification code to the user's phone number for authentication.

{{< example id="phone-verification-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}

+1

• United States (+1)
• United Kingdom (+44)
• Australia (+61)
• Germany (+49)
• France (+33)
• Germany (+49)

Phone number:

We will send you an SMS with a verification code.

Send verification code {{< /example >}}

Phone number select

Use this example to select one of your saved phone numbers from an application with a copy-paste feature.

{{< example id="phone-select-number-input" github="components/phone-input.md" show_dark=true disable_init_js="true" javascript=` const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'phone-numbers'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-phone');

const $defaultIcon = document.getElementById('copy-icon'); const $successIcon = document.getElementById('copy-icon-success');

const $defaultTooltipMessage = document.getElementById('tooltip-text'); const $successTooltipMessage = document.getElementById('tooltip-text-success');

clipboard.updateOnCopyCallback((clipboard) => { showSuccess();

// reset to default state
setTimeout(() => {
    resetToDefault();
}, 2000);

})

const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden');
tooltip.show(); }

const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } ` >}}

Primary phone number: Manage numbers

+1 234 456 7890 +1 456 234 7890 +1 432 621 3163

Copy number Copied!

Please set your primary phone number.

{{< /example >}}

Authentication form

Use this example to authenticate users with a login form using a phone number instead of an email address.

{{< example id="phone-auth-number-input" github="components/phone-input.md" show_dark=true iframeHeight="390" disable_init_js="true" >}}

Phone number:

+1

• United States (+1)
• United Kingdom (+44)
• Australia (+61)
• Germany (+49)
• France (+33)
• Germany (+49)

Your password

I accept the Terms and Conditions

Sign Up {{< /example >}}

Advanced phone verification

Use this example to verify a phone number via SMS or phone call using a dropdown component.

{{< example id="phone-code-alt-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}

+1

• United States (+1)
• United Kingdom (+44)
• Australia (+61)
• Germany (+49)
• France (+33)
• Germany (+49)

Phone number:

Send SMS

• Send SMS
• Call

Activate account {{< /example >}}