---
title: Select menu with search box
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxCss":[{"label":"App.jsx","code":"import { useState } from \"react\"\n\nexport default () => {\n\n    // You can use any api to generate list of countries\n    const menuItems = [\n        \"United States of America\", \"Albania\", \"Algeria\", \"Andorra\", \"Argentina\", \"Armenia\", \"Austria\",\n        \"Australia\", \"Austria\", \"Azerbaijan\", \"Bahamas\", \"Brazil\", \"Canada\", \"Colombia\", \"China\",\n        \"Egypt\", \"France\", \"Germany\", \"India\", \"Iraq\"\n    ]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: null,\n        idx: null\n    })\n\n    const [state, setState] = useState(false)\n\n    const handleSearch = (e) => {\n        const menuEls = document.querySelectorAll('.menu-el-js')\n        const searchVal = e.target.value.toLocaleLowerCase()\n\n        menuEls.forEach(el => {\n            el.classList.remove(\"hidden\")\n            if (!el.textContent.toLocaleLowerCase().includes(searchVal)) {\n                el.classList.add(\"hidden\")\n            }\n        })\n    }\n\n    return (\n        <div className=\"select-menu-secondary\">\n            <button className=\"select-menu-btn\" \n                aria-haspopup=\"true\" \n                aria-expanded=\"true\"\n                onClick={() => setState(!state)}\n            >\n                { selectedItem.item || \"Select a country\" }\n                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\" />\n                </svg>\n            </button>\n            \n            {\n                state ? (\n                    <div className=\"items-container\">\n                        <ul className=\"items-list\" role=\"listbox\">\n                            <div className=\"serach-box\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" 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=\"\"\n                                    onInput={handleSearch}\n                                />\n                            </div>\n                            <div className=\"items\">\n                                {\n                                    menuItems.map((el, idx) => (\n                                        <li\n                                            key={idx}\n                                            onClick={() => {                                                \n                                                setSelectedItem({\n                                                    item: el,\n                                                    idx\n                                                })\n                                                setState(false)\n                                            }}\n                                            role=\"option\"\n                                            className={`${selectedItem.idx == idx ? 'active' : ''} menu-el-js item`}\n                                        >\n                                            { el }\n                                            {\n                                                selectedItem.idx == idx ? (\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                                        <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                                    </svg>\n                                                ) : ''\n                                            }\n                                        </li>\n                                    ))\n                                }\n                            </div>\n                        </ul>\n                    </div>\n                ) : ''\n            }\n        </div>\n    )\n}"},{"label":"style.css","code":".select-menu-secondary {\n  position: relative;\n  max-width: 20rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  margin: 3rem auto 0px auto;\n  font-size: 15px;\n}\n.select-menu-secondary .select-menu-btn {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0.5rem 0.75rem 0.5rem 0.75rem;\n  color: #6b7280;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n  cursor: default;\n  outline: none;\n}\n.select-menu-secondary .select-menu-btn:focus {\n  border-color: #4f46e5;\n}\n.select-menu-secondary .select-menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #9ca3af;\n}\n.select-menu-secondary .items-container {\n  position: relative;\n  width: 100%;\n}\n.select-menu-secondary .items-container .items-list {\n  position: absolute;\n  width: 100%;\n  margin-top: 0.75rem;\n  background-color: #FFF;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 2px 0 #0000000d;\n}\n.select-menu-secondary .items-container .items-list .serach-box {\n  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;\n  display: flex;\n  align-items: center;\n}\n.select-menu-secondary .items-container .items-list .serach-box svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #9ca3af;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.select-menu-secondary .items-container .items-list .serach-box input {\n  padding: 0.5rem;\n  color: #6b7280;\n  width: 100%;\n  outline: none;\n  border-radius: 0.375rem;\n}\n.select-menu-secondary .items-container .items-list .items {\n  max-height: 16rem;\n  margin-top: 0.5rem;\n  overflow-y: auto;\n}\n.select-menu-secondary .items-container .items-list .items .item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0.75rem 0.5rem 0.75rem;\n  cursor: default;\n  transition-duration: 150ms;\n  color: #6b7280;\n}\n.select-menu-secondary .items-container .items-list .items .item:hover {\n  color: #4f46e5;\n  background-color: #eef2ff;\n}\n.select-menu-secondary .items-container .items-list .items .item svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #4f46e5;\n}\n.select-menu-secondary .items-container .items-list .items .active {\n  color: #4f46e5;\n  background-color: #eef2ff;\n}\n.select-menu-secondary .items-container .items-list .items .hidden {\n  display: none;\n}"}],"jsxTail":[{"code":"import * as Select from \"@radix-ui/react-select\";\nimport React, { useState } from \"react\";\n\nexport default () => {\n  // You can use any api to generate list of countries\n  const menuItems = [\n    \"United States of America\",\n    \"Albania\",\n    \"Algeria\",\n    \"Andorra\",\n    \"Argentina\",\n    \"Armenia\",\n    \"Austria\",\n    \"Australia\",\n    \"Azerbaijan\",\n    \"Bahamas\",\n    \"Brazil\",\n    \"Canada\",\n    \"Colombia\",\n    \"China\",\n    \"Egypt\",\n    \"France\",\n    \"Germany\",\n    \"India\",\n    \"Iraq\",\n  ];\n\n  const [value, setValue] = useState(\"\");\n  const [countries, setCountries] = React.useState(menuItems);\n\n  const handleSearch = (e) => {\n    const value = e.target.value;\n    const results = menuItems.filter((item) =>\n      item.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n    );\n    setTimeout(() => setCountries(results), 100);\n  };\n\n  return (\n      <Select.Root\n        onValueChange={setValue}\n        onOpenChange={() => setCountries(menuItems)}\n      >\n        <div className=\"w-72 max-w-full\">\n          <Select.Trigger className=\"w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n            <Select.Value placeholder=\"Select your country\">\n              {value}\n            </Select.Value>\n            <Select.Icon className=\"text-gray-400\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"w-5 h-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\"\n                />\n              </svg>\n            </Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content\n              position=\"popper\"\n              avoidCollisions={false}\n              className=\"w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <div className=\"shadow flex items-center\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-6 w-6 mx-3 text-gray-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n                  />\n                </svg>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search\"\n                  className=\"p-2 text-gray-500 w-full rounded-md outline-none\"\n                  onInput={handleSearch}\n                />\n              </div>\n              <Select.Viewport className=\"max-h-64 mt-2 overflow-y-auto\">\n                {countries.length < 1 ? (\n                  <div className=\"px-3 py-2 text-gray-600\">Nothing found.</div>\n                ) : (\n                  \"\"\n                )}\n                {countries.map((item, idx) => (\n                  <SelectItem key={idx} value={item}>\n                    {item}\n                  </SelectItem>\n                ))}\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </div>\n      </Select.Root>\n  );\n};\n\nconst SelectItem = React.forwardRef(\n  ({ children, className, ...props }, forwardedRef) => {\n    // If you want to make this component more customizable you can use classnames and tailwind-merge library.\n    return (\n      <Select.Item\n        className=\"flex items-center justify-between px-3 cursor-default py-2 duration-150 text-gray-600 data-[state=checked]:text-indigo-600 data-[state=checked]:bg-indigo-50 data-[highlighted]:text-indigo-600 data-[highlighted]:bg-indigo-50 data-[highlighted]:hover:text-indigo-600 data-[highlighted]:hover:bg-indigo-50 outline-none\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <Select.ItemText>\n          <div className=\"pr-4 line-clamp-1\">{children}</div>\n        </Select.ItemText>\n        <div className=\"w-6\">\n          <Select.ItemIndicator>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"w-5 h-5 text-indigo-600\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>{\" \"}\n          </Select.ItemIndicator>\n        </div>\n      </Select.Item>\n    );\n  }\n);\n","label":"App.jsx"}]},"preview":"function App() {\n  // You can use any api to generate list of countries\n  const menuItems = [\n    \"United States of America\",\n    \"Albania\",\n    \"Algeria\",\n    \"Andorra\",\n    \"Argentina\",\n    \"Armenia\",\n    \"Austria\",\n    \"Australia\",\n    \"Azerbaijan\",\n    \"Bahamas\",\n    \"Brazil\",\n    \"Canada\",\n    \"Colombia\",\n    \"China\",\n    \"Egypt\",\n    \"France\",\n    \"Germany\",\n    \"India\",\n    \"Iraq\",\n  ];\n\nconst SelectItem = React.forwardRef(\n  ({ children, className, value }, forwardedRef) => {\n    // If you want to make this component more customizable you can use classnames and tailwind-merge library.\n    return (\n      <Select.Item\n        className=\"flex items-center justify-between px-3 cursor-default py-2 duration-150 text-gray-600 data-[state=checked]:text-indigo-600 data-[state=checked]:bg-indigo-50 data-[highlighted]:text-indigo-600 data-[highlighted]:bg-indigo-50 data-[highlighted]:hover:text-indigo-600 data-[highlighted]:hover:bg-indigo-50 outline-none\"\n        value={value}\n        ref={forwardedRef}\n      >\n        <Select.ItemText>\n          <div className=\"pr-4 line-clamp-1 flex items-center gap-2\">\n            {children}\n          </div>\n        </Select.ItemText>\n        <div className=\"w-6\">\n          <Select.ItemIndicator>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"w-5 h-5 text-indigo-600\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>{\" \"}\n          </Select.ItemIndicator>\n        </div>\n      </Select.Item>\n    );\n  }\n);\n\n  const [value, setValue] = useState(\"\");\n  const [countries, setCountries] = useState(menuItems);\n\n  const handleSearch = (e) => {\n    const value = e.target.value;\n    const results = menuItems.filter((item) =>\n      item.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n    );\n    setTimeout(() => setCountries(results), 100);\n  };\n\n  return (\n    <div className=\"m-6\">\n      <Select.Root\n        onValueChange={setValue}\n        onOpenChange={() => setCountries(menuItems)}\n      >\n        <div className=\"w-72 max-w-full mx-auto\">\n          <Select.Trigger className=\"w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2\">\n            <Select.Value placeholder=\"Select your country\">\n              {value}\n            </Select.Value>\n            <Select.Icon className=\"text-gray-400\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"w-5 h-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\"\n                />\n              </svg>\n            </Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content\n              position=\"popper\"\n              avoidCollisions={false}\n              className=\"w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <div className=\"shadow flex items-center\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-6 w-6 mx-3 text-gray-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n                  />\n                </svg>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search\"\n                  className=\"p-2 text-gray-500 w-full rounded-md outline-none\"\n                  onInput={handleSearch}\n                />\n              </div>\n              <Select.Viewport className=\"max-h-64 mt-2 overflow-y-auto\">\n                {countries.length < 1 ? (\n                  <div className=\"px-3 py-2 text-gray-600\">Nothing found.</div>\n                ) : (\n                  \"\"\n                )}\n    <SelectItem value='United States of America'>\n      United States of America\n    </SelectItem>\n\n    <SelectItem value='Albania'>\n      Albania\n    </SelectItem>\n\n    <SelectItem value='Algeria'>\n      Algeria\n    </SelectItem>\n\n    <SelectItem value='Andorra'>\n      Andorra\n    </SelectItem>\n\n    <SelectItem value='Argentina'>\n      Argentina\n    </SelectItem>\n\n    <SelectItem value='Armenia'>\n      Armenia\n    </SelectItem>\n\n    <SelectItem value='Austria'>\n      Austria\n    </SelectItem>\n\n    <SelectItem value='Australia'>\n      Australia\n    </SelectItem>\n\n    <SelectItem value='Azerbaijan'>\n      Azerbaijan\n    </SelectItem>\n\n    <SelectItem value='Bahamas'>\n      Bahamas\n    </SelectItem>\n\n    <SelectItem value='Brazil'>\n      Brazil\n    </SelectItem>\n\n    <SelectItem value='Canada'>\n      Canada\n    </SelectItem>\n\n    <SelectItem value='Colombia'>\n      Colombia\n    </SelectItem>\n\n    <SelectItem value='China'>\n      China\n    </SelectItem>\n\n    <SelectItem value='Egypt'>\n      Egypt\n    </SelectItem>\n\n    <SelectItem value='France'>\n      France\n    </SelectItem>\n\n    <SelectItem value='Germany'>\n      Germany\n    </SelectItem>\n\n    <SelectItem value='India'>\n      India\n    </SelectItem>\n\n    <SelectItem value='Iraq'>\n      Iraq\n    </SelectItem>\n\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </div>\n      </Select.Root>\n    </div>\n  );\n};","vue":{"vueCss":[],"vueTail":[]},"html":{"htmlTail":[]}}
slug: /select-menus
id: 87130c91-9206-4289-b622-3b23bd8a97e1
created_at: 3
---

<FUISelectMenuWithSearchBox />