The input phone component is a text field specifically designed for entering a phone number. It is usually found in forms and mobile apps as a part of registration, verification, or communication processes.
Check out below our Tailwind CSS input phone examples. They come in different styles, allowing you to easily adapt the component to your project needs.
Use this basic phone number input field with a placeholder example and a note to include the country code.
Contact Number
Include your country code for international numbers.
import { Input, Typography } from "@material-tailwind/react"; export function InputSimplePhone() { return ( <div className="w-96"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Contact Number </Typography> <Input maxLength={16} placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} /> <Typography className="mt-2 text-xs font-normal text-blue-gray-500"> Include your country code for international numbers. </Typography> </div> ); }Try our tailwind phone input example that displays validation messages below, either confirming the phone number format (green) or indicating an error (red).
Contact Number
Great! Your phone number is valid.
Contact Number
Please match the requested format. e.g., +1 123-456-7890
import { Input, Typography } from "@material-tailwind/react"; export function InputPhoneValidation() { return ( <div className="space-y-8"> <div className="w-96"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Contact Number </Typography> <Input success={true} maxLength={16} placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none !border-t-green-500 placeholder:text-green-300 placeholder:opacity-100 focus:!border-t-green-500 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} /> <Typography color="green" className="mt-2 text-xs font-normal"> Great! Your phone number is valid. </Typography> </div> <div className="w-96"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Contact Number </Typography> <Input error={true} maxLength={16} placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none !border-t-red-500 placeholder:text-red-300 placeholder:opacity-100 focus:!border-t-red-500 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} /> <Typography color="red" className="mt-2 flex items-center gap-2 text-xs font-normal" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" ></path> </svg> Please match the requested format. e.g., +1 123-456-7890 </Typography> </div> </div> ); }Use this phone input example with a phone icon to the left of the input, adding a visual cue for the type of input required.
Contact Number
Include your country code for international numbers.
import { Input, Typography } from "@material-tailwind/react"; export function InputPhoneWithIcon() { return ( <div className="w-96"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Contact Number </Typography> <Input maxLength={16} placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} icon={ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4 text-blue-gray-600" > <path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd" /> </svg> } /> <Typography className="mt-2 text-xs font-normal text-blue-gray-500"> Include your country code for international numbers. </Typography> </div> ); }Use this phone input example that allows users to select a country code from a dropdown, with the selected code appearing before the input.
Enter Phone Number
import React from "react"; import { Input, Menu, MenuHandler, MenuList, MenuItem, Button, Typography, } from "@material-tailwind/react"; const COUNTRIES = ["France (+33)", "Germany (+49)", "Spain (+34)", "USA (+1)"]; const CODES = ["+33", "+49", "+34", "+1"]; export function InputPhoneCountryCode() { const [country, setCountry] = React.useState(0); return ( <div className="w-full max-w-[24rem]"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Enter Phone Number </Typography> <div className="relative flex w-full"> <Menu placement="bottom-start"> <MenuHandler> <Button ripple={false} variant="text" color="blue-gray" className="h-10 w-14 shrink-0 rounded-r-none border border-r-0 border-blue-gray-200 bg-transparent px-3" > {CODES[country]} </Button> </MenuHandler> <MenuList className="max-h-[20rem] max-w-[18rem]"> {COUNTRIES.map((country, index) => { return ( <MenuItem key={country} value={country} onClick={() => setCountry(index)} > {country} </MenuItem> ); })} </MenuList> </Menu> <Input type="tel" pattern="[0-9]*" inputMode="numeric" maxLength={12} placeholder="324-456-2323" className="appearance-none rounded-l-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} containerProps={{ className: "min-w-0", }} /> </div> </div> ); }Check out this phone input where the label text moves up and becomes smaller as the user starts typing, ensuring the label is always visible.
import { Input, Typography } from "@material-tailwind/react"; export function InputPhoneFloatingLabel() { return ( <div className="w-96"> <Input maxLength={16} label="Contact Number" placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" icon={ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4 text-blue-gray-600" > <path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd" /> </svg> } /> </div> ); }This phone input component paired with a dropdown allows users to choose their primary contact number from multiple saved numbers. Try to your application now!
import { Select, Option } from "@material-tailwind/react"; export function InputPhoneWithSelect() { return ( <div className="w-96"> <Select label="Contact Number"> <Option value="+33">(+33) 123-456-7890</Option> <Option value="+49">(+49) 123-456-7890</Option> <Option value="+31">(+31) 123-456-7890</Option> <Option value="+34">(+34) 123-456-7890</Option> </Select> </div> ); }Use this phone input example integrated within a sign-in or authentication form, with an option to continue using the phone number or sign in with Google.
Contact Number
Or
import { Input, Typography, Button } from "@material-tailwind/react"; export function InputPhoneWithAuth() { return ( <div className="w-96"> <Typography variant="small" color="blue-gray" className="mb-1 font-medium" > Contact Number </Typography> <Input maxLength={16} placeholder="e.g., +1 123-456-7890" pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$" className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" labelProps={{ className: "before:content-none after:content-none", }} /> <Button className="mt-4" fullWidth> Continue </Button> <div className="my-4 flex items-center gap-2"> <span className="h-[1px] w-1/2 bg-blue-gray-100" /> <Typography variant="small" color="blue-gray"> Or </Typography> <span className="h-[1px] w-1/2 bg-blue-gray-100" /> </div> <Button variant="outlined" className="flex w-full items-center justify-center gap-2" > <img src="https://docs.material-tailwind.com/icons/google.svg" alt="google" className="h-4 w-4" /> Sign in with Google </Button> </div> ); }