Phone Input

A modern animated phone number input with country selector and validation.

Cardshoverspringformphonecountryinputvalidationframer-motion

Phone number

Playground

Adjust the important props for this component and grab JSX that matches your choices.

defaultCountry

ISO 3166-1 alpha-2 code for the initially selected country.

placeholder

Placeholder text shown in the phone number input.

label

Optional label text displayed above the input.

minDigits

Minimum digits required for validation.

Generated JSX

Copy this into your page.

<useCallback
  defaultCountry="US"
  placeholder="Phone number"
  label=""
  minDigits={7}
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.