---
title: Username Input
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"username\" className=\"block py-2 text-gray-500\">\n                Username\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    @\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"Sidi Dev\"\n                    id=\"username\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}\n"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"username-input\">\n            <label for=\"username\">\n                Username\n            </label>\n            <div className=\"input-container\">\n                <div className=\"symbol\">\n                    @\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"Sidi Dev\"\n                    id=\"username\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".username-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.username-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.username-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.username-input .input-container .symbol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.username-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"svelte":{"svelteTail":[{"code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"username\" class=\"block py-2 text-gray-500\">\n        Username\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            @\n        </div>\n        <input type=\"text\" placeholder=\"Sidi Dev\" id=\"username\" class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"/>\n    </div>\n</div>","label":"App.svelte"}]},"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"username\" className=\"block py-2 text-gray-500\">\n                Username\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    @\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"Sidi Dev\"\n                    id=\"username\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","vue":{"vueCss":[{"code":"<template>\n  <div class=\"username-input\">\n    <label for=\"username\">\n        Username\n    </label>\n    <div class=\"input-container\">\n        <div class=\"symbol\">\n            @\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"Sidi Dev\"\n            id=\"username\"\n            class=\"input\"\n        />\n    </div>\n  </div>\n</template>","label":"App.vue"},{"code":"  .username-input {\n    max-width: 28rem;\n    padding: 0px 1rem 0px 1rem;\n    margin: 3rem auto 0px auto;\n  }\n  .username-input label {\n    display: block;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    color: #6b7280;\n  }\n  .username-input .input-container {\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border: solid 1px #e5e7eb;\n    border-radius: 0.375rem;\n  }\n  .username-input .input-container .symbol {\n    padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n    background-color: #f9fafb;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    border-right: solid 1px #e5e7eb;\n  }\n  .username-input .input-container .input {\n    width: 100%;\n    padding: 0.625rem;\n    margin-left: 0.5rem;\n    background-color: transparent;\n    outline: none;\n  }","label":"style.css"}],"vueTail":[{"label":"App.vue","code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"username\" class=\"block py-2 text-gray-500\">\n        Username\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            @\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"Sidi Dev\"\n            id=\"username\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n  </div>\n</template>"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"username\" class=\"block py-2 text-gray-500\">\n        Username\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            @\n        </div>\n        <input type=\"text\" placeholder=\"Sidi Dev\" id=\"username\" class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"/>\n    </div>\n</div>\n"}]}}
slug: /inputs
id: 107baa23-ef0f-4940-be2c-ff2bb089cf05
created_at: 4
---

<FUIUsernameInput />