---
title: Status Select Menu
category: Application
paid: true
isActive: true
ltr: {"preview":"function App() {\n\n    const menuItems = [\n        [\"Normal\", \"bg-blue-600\", \"text-blue-600\"],\n        [\"Error\", \"bg-red-600\", \"text-red-600\"],\n        [\"Pending\", \"bg-teal-600\", \"text-teal-600\"],\n        [\"Canceled\", \"bg-gray-300\", \"text-gray-600\"],\n        [\"Reviewing\", \"bg-fuchsia-600\", \"text-fuchsia-600\"],\n    ]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: menuItems[0],\n        idx: 0\n    })\n    const [state, setState] = useState(false)\n    const selectMenuRef = useRef()\n\n    useEffect(() => {\n\n        const handleSelectMenu = (e) => {\n            if (!selectMenuRef.current.contains(e.target)) {\n                setState(false)\n            }\n        }\n\n        document.addEventListener('click', handleSelectMenu)\n\n    }, [])\n\n    return (\n        <div className=\"relative max-w-xs px-4 mx-auto mt-12 text-base\">\n            <button ref={selectMenuRef} className=\"flex items-center justify-between gap-2 w-full px-3 py-2 text-gray-500 bg-white border rounded-md shadow-sm cursor-default outline-none focus:border-indigo-600\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"true\"\n                aria-labelledby=\"listbox-label\"\n                onClick={() => setState(!state)}\n            >\n                <div className=\"flex items-center gap-x-3\">\n                    Status <span className={`w-2 h-2 rounded-full ${selectedItem.item[1]}`}></span>\n                    <span className={`text-sm ${selectedItem.item[2]}`}>{selectedItem.item[0]}</span>\n                </div>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-400\">\n                    <path fillRule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clipRule=\"evenodd\" />\n                </svg>\n            </button>\n\n            {\n                state ? (\n                    <div className=\"relative w-full\">\n                        <ul className=\"absolute w-full mt-3 overflow-y-auto bg-white border rounded-md shadow-sm max-h-64\" role=\"listbox\">\n                            {\n                                menuItems.map((el, idx) => (\n                                    <li\n                                        key={idx}\n                                        onClick={() => setSelectedItem({\n                                            item: el,\n                                            idx\n                                        })}\n                                        role=\"option\"\n                                        aria-selected={selectedItem.idx == idx ? true : false}\n                                        className={`${selectedItem.idx == idx ? 'text-indigo-600 bg-indigo-50' : ''} flex items-center justify-between gap-2 px-3 cursor-default py-2 duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`}\n                                    >\n                                        <div className=\"flex items-center gap-x-3\">\n                                            <span className={`w-2 h-2 rounded-full ${el[1]}`}></span>\n                                            {el[0]}\n                                        </div>\n                                        {\n                                            selectedItem.idx == idx ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-5 h-5 text-indigo-600\" 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                        </ul>\n                    </div>\n                ) : ''\n            }\n        </div>\n    )\n}","vue":{"vueCss":[],"vueTail":[]},"react":{"jsxCss":[],"jsxTail":[{"code":"import * as Select from \"@radix-ui/react-select\";\nimport React from \"react\";\n\nexport default () => {\n  const [selectedItemIdx, setSelectedItemIdx] = React.useState(0);\n\n  const menuItems = [\n    {\n      label: \"Normal\",\n      statusColor: \"text-blue-600\",\n      statusBg: \"bg-blue-600\",\n    },\n    {\n      label: \"Error\",\n      statusColor: \"text-red-600\",\n      statusBg: \"bg-red-600\",\n    },\n    {\n      label: \"Pending\",\n      statusColor: \"text-teal-600\",\n      statusBg: \"bg-teal-600\",\n    },\n    {\n      label: \"Canceled\",\n      statusColor: \"text-gray-600\",\n      statusBg: \"bg-gray-300\",\n    },\n    {\n      label: \"Reviewing\",\n      statusColor: \"text-fuchsia-600\",\n      statusBg: \"bg-fuchsia-600\",\n    },\n  ];\n\n  return (\n      <Select.Root onValueChange={setSelectedItemIdx}>\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 a status\">\n              <div className=\"flex items-center gap-x-3\">\n                Status{\" \"}\n                <span\n                  className={`w-2 h-2 rounded-full ${menuItems[selectedItemIdx].statusBg}`}\n                ></span>\n                <span\n                  className={`text-sm ${menuItems[selectedItemIdx].statusColor}`}\n                >\n                  {menuItems[selectedItemIdx].label}\n                </span>\n              </div>\n            </Select.Value>\n            <Select.Icon className=\"text-gray-400\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                className=\"w-5 h-5 text-gray-400\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n                  clipRule=\"evenodd\"\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)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <Select.Viewport className=\"\">\n                {menuItems.map((item, idx) => (\n                  <SelectItem key={idx} value={idx}>\n                    <span\n                      className={`w-2 h-2 rounded-full ${item.statusBg}`}\n                    ></span>\n                    {item.label}\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 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","label":"App.jsx"}]},"html":{"htmlTail":[]}}
slug: /select-menus
id: 538736ce-8fea-4259-a4b3-c864235a7a0a
created_at: 1668384932604
---

<FUIStatusSelectMenu />