---
title: Phone Number Input
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div>\n            <label className=\"text-gray-600\">\n                Phone number\n            </label>\n            <div className=\"relative mt-2 max-w-xs text-gray-500\">\n                <div className=\"absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2\">\n                    <select className=\"text-sm bg-transparent outline-none rounded-lg h-full\">\n                        <option>US</option>\n                        <option>ES</option>\n                        <option>MR</option>\n                    </select>\n                </div>\n                <input\n                    type=\"number\"\n                    placeholder=\"+1 (555) 000-000\"\n                    className=\"w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[]},"preview":"function App() {\n    return (\n        <div className=\"max-w-sm mx-auto mt-12\">\n            <label className=\"text-gray-600\">\n                Phone number\n            </label>\n            <div className=\"relative mt-2 max-w-xs text-gray-500\">\n                <div className=\"absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2\">\n                    <select className=\"text-sm bg-transparent outline-none rounded-lg h-full\">\n                        <option>US</option>\n                        <option>ES</option>\n                        <option>MR</option>\n                    </select>\n                </div>\n                <input\n                    type=\"number\"\n                    placeholder=\"+1 (555) 000-000\"\n                    className=\"w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n            </div>\n        </div>\n    )\n}","svelte":{"svelteTail":[{"code":"<div>\n    <label class=\"text-gray-600\">\n        Phone number\n    </label>\n    <div class=\"relative mt-2 max-w-xs text-gray-500\">\n        <div class=\"absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2\">\n            <select class=\"text-sm bg-transparent outline-none rounded-lg h-full\">\n                <option>US</option>\n                <option>ES</option>\n                <option>MR</option>\n            </select>\n        </div>\n        <input\n            type=\"number\"\n            placeholder=\"+1 (555) 000-000\"\n            class=\"w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n        />\n    </div>\n</div>\n","label":"App.svelte"}]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <div>\n    <label class=\"text-gray-600\">\n        Phone number\n    </label>\n    <div class=\"relative mt-2 max-w-xs text-gray-500\">\n        <div class=\"absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2\">\n            <select class=\"text-sm bg-transparent outline-none rounded-lg h-full\">\n                <option>US</option>\n                <option>ES</option>\n                <option>MR</option>\n            </select>\n        </div>\n        <input\n            type=\"number\"\n            placeholder=\"+1 (555) 000-000\"\n            class=\"w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n        />\n    </div>\n  </div>\n</template>"}],"vueCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<div>\n    <label class=\"text-gray-600\">\n        Phone number\n    </label>\n    <div class=\"relative mt-2 max-w-xs text-gray-500\">\n        <div class=\"absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2\">\n            <select class=\"text-sm bg-transparent outline-none rounded-lg h-full\">\n                <option>US</option>\n                <option>ES</option>\n                <option>MR</option>\n            </select>\n        </div>\n        <input\n            type=\"number\"\n            placeholder=\"+1 (555) 000-000\"\n            class=\"w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n        />\n    </div>\n</div>\n"}]}}
slug: /inputs
id: 47c8cbaa-4f5d-461c-93d8-7b42ef3d3325
created_at: 1668381492796
---

<FUIPhoneNumberInput />