---
title: Amount Input with select in right
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-sm mx-auto mt-12\">\n            <label className=\"text-gray-600\">\n                Amount\n            </label>\n            <div className=\"relative mt-2 max-w-xs text-gray-500\">\n                <span className=\"h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\">\n                    &#x24;\n                </span>\n                <input\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    className=\"w-full pl-8 pr-16 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n                <div className=\"absolute inset-y-0 right-3 flex items-center\">\n                    <select className=\"text-sm bg-transparent outline-none px-1 rounded-lg h-full\">\n                        <option>USD</option>\n                        <option>EUR</option>\n                        <option>MRO</option>\n                    </select>\n                </div>\n            </div>\n        </div>\n    )\n}","react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div>\n            <label className=\"text-gray-600\">\n                Amount\n            </label>\n            <div className=\"relative mt-2 max-w-xs text-gray-500\">\n                <span className=\"h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\">\n                    &#x24;\n                </span>\n                <input\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    className=\"w-full pl-8 pr-16 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                />\n                <div className=\"absolute inset-y-0 right-3 flex items-center\">\n                    <select className=\"text-sm bg-transparent outline-none px-1 rounded-lg h-full\">\n                        <option>USD</option>\n                        <option>EUR</option>\n                        <option>MRO</option>\n                    </select>\n                </div>\n            </div>\n        </div>\n    )\n}"}]},"vue":{"vueCss":[],"vueTail":[]},"html":{"htmlTail":[{"code":"<div>\n    <label class=\"text-gray-600\">\n        Amount\n    </label>\n    <div class=\"relative mt-2 max-w-xs text-gray-500\">\n        <span class=\"h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\">\n            &#x24;\n        </span>\n        <input type=\"number\" placeholder=\"0.00\" class=\"w-full pl-8 pr-16 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\" />\n        <div class=\"absolute inset-y-0 right-3 flex items-center\">\n            <select class=\"text-sm bg-transparent outline-none px-1 rounded-lg h-full\">\n                <option>USD</option>\n                <option>EUR</option>\n                <option>MRO</option>\n            </select>\n        </div>\n    </div>\n</div>\n","label":"index.html"}]}}
slug: /inputs
id: ff9568cb-85f7-4d82-ba99-0abece2c72f5
created_at: 1668381101391
---

<FUIAmountInputWithSelectInRight />