---
title: Search Input
category: Application
paid: false
isActive: true
ltr: {"vue":{"vueCss":[{"label":"App.vue","code":"<template>\n  <form\n    class=\"search-form-primary\">\n    <div class=\"search-form-container\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"search-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\n        <input\n            type=\"text\"\n            placeholder=\"Search\"\n            class=\"search-input\"\n        />\n    </div>\n  </form>\n</template>"},{"code":"  .search-form-primary {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n  }\n  .search-form-primary .search-form-container {\n    position: relative;\n  }\n  .search-form-primary .search-form-container .search-icon {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-top: auto;\n    margin-bottom: auto;\n    left: 0.75rem;\n    color: #9ca3af;\n  }\n  .search-form-primary .search-form-container .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 3rem;\n    color: #6b7280;\n    border: solid 1px #e5e7eb;\n    border-radius: 0.375rem;\n    outline: none;\n    background-color: #f9fafb;\n  }\n  .search-form-primary .search-form-container .search-input:focus {\n    background-color: #FFF;\n    border: #4f46e5 1px solid;\n  }","label":"style.css"}],"vueTail":[{"code":"<template>\n  <form class=\"max-w-md px-4 mx-auto mt-12\">\n    <div class=\"relative\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3\"\n          fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\"\n            d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\n      <input type=\"text\" placeholder=\"Search\"\n        class=\"w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600\" />\n    </div>\n  </form>\n</template>","label":"App.vue"}]},"svelte":{"svelteTail":[{"code":"<form onSubmit=\"event.preventDefault();\" class=\"max-w-md px-4 mx-auto mt-12\">\n    <div class=\"relative\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\n        <input type=\"text\" placeholder=\"Search\" class=\"w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600\"/>\n    </div>\n</form>\n","label":"App.svelte"}]},"html":{"htmlTail":[{"label":"index.html","code":"<form onSubmit=\"event.preventDefault();\" class=\"max-w-md px-4 mx-auto mt-12\">\n    <div class=\"relative\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\n        <input type=\"text\" placeholder=\"Search\" class=\"w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600\"/>\n    </div>\n</form>\n"}]},"preview":"function App() {\n    return (\n        <form\n            onSubmit={(e) => e.preventDefault()} \n            className=\"max-w-md px-4 mx-auto mt-12\">\n            <div className=\"relative\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Search\"\n                    className=\"w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600\"\n                />\n            </div>\n        </form>\n    )\n}","react":{"jsxCss":[{"code":"export default () => {\n    return (\n        <form\n            onSubmit={(e) => e.preventDefault()} \n            className=\"search-form-primary\">\n            <div className=\"search-form-container\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"search-icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Search\"\n                    className=\"search-input\"\n                />\n            </div>\n        </form>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".search-form-primary {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.search-form-primary .search-form-container {\n  position: relative;\n}\n.search-form-primary .search-form-container .search-icon {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-top: auto;\n  margin-bottom: auto;\n  left: 0.75rem;\n  color: #9ca3af;\n}\n.search-form-primary .search-form-container .search-input {\n  width: 100%;\n  padding: 0.75rem 1rem 0.75rem 3rem;\n  color: #6b7280;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  outline: none;\n  background-color: #f9fafb;\n}\n.search-form-primary .search-form-container .search-input:focus {\n  background-color: #FFF;\n  border: #4f46e5 1px solid;\n}\n"}],"jsxTail":[{"code":"export default () => {\n    return (\n        <form\n            onSubmit={(e) => e.preventDefault()} \n            className=\"max-w-md px-4 mx-auto mt-12\">\n            <div className=\"relative\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Search\"\n                    className=\"w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600\"\n                />\n            </div>\n        </form>\n    )\n}","label":"App.jsx"}]}}
slug: /inputs
id: 6dfbd89e-e6ab-4223-9017-bf0855c269f3
created_at: 2
---

<FUISearchInput />