---
title: Select menu with avatars
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n  \n  const [selectedItemIdx, setSelectedItemIdx] = useState(0);\n\n  const menuItems = [\n    {\n      name: \"Danya\",\n      label: \"@danya\",\n      avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n    },\n    {\n      name: \"Osama\",\n      label: \"@osama\",\n      avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n    },\n    {\n      name: \"Loyan\",\n      label: \"@loyan\",\n      avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n    },\n    {\n      name: \"Carllose\",\n      label: \"@carllose\",\n      avatar:\n        \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f\",\n    },\n    {\n      name: \"Micheal\",\n      label: \"@micheal\",\n      avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\n    },\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\n  return (\n    <div className=\"m-6\">\n      <Select.Root onValueChange={setSelectedItemIdx}>\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 a member\">\n              <div className=\"flex items-center gap-2\">\n                <img\n                  src={menuItems[selectedItemIdx].avatar}\n                  className=\"w-5 h-5 rounded-full\"\n                />\n                <div className=\"flex-1 text-left flex items-center gap-x-1\">\n                  {menuItems[selectedItemIdx].name}\n                  <span>{menuItems[selectedItemIdx].label}</span>\n                </div>\n              </div>\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)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm\"\n            >\n              <Select.Viewport className=\"\">\n                  <SelectItem value='0'>\n                    <img src='https://randomuser.me/api/portraits/women/79.jpg' className='w-5 h-5 rounded-full' />\n                    <div className='flex-1 text-left flex items-center gap-x-1'>\n                      Danya\n                      <span className='text-sm'>@danya</span>\n                    </div>\n                  </SelectItem>\n\n                  <SelectItem value='1'>\n                    <img src='https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg' className='w-5 h-5 rounded-full' />\n                    <div className='flex-1 text-left flex items-center gap-x-1'>\n                      Osama\n                      <span className='text-sm'>@osama</span>\n                    </div>\n                  </SelectItem>\n\n                  <SelectItem value='2'>\n                    <img src='https://randomuser.me/api/portraits/men/86.jpg' className='w-5 h-5 rounded-full' />\n                    <div className='flex-1 text-left flex items-center gap-x-1'>\n                      Loyan\n                      <span className='text-sm'>@loyan</span>\n                    </div>\n                  </SelectItem>\n\n                  <SelectItem value='3'>\n                    <img src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f' className='w-5 h-5 rounded-full' />\n                    <div className='flex-1 text-left flex items-center gap-x-1'>\n                      Carllose\n                      <span className='text-sm'>@carllose</span>\n                    </div>\n                  </SelectItem>\n\n                  <SelectItem value='4'>\n                    <img src='https://randomuser.me/api/portraits/men/46.jpg' className='w-5 h-5 rounded-full' />\n                    <div className='flex-1 text-left flex items-center gap-x-1'>\n                      Micheal\n                      <span className='text-sm'>@micheal</span>\n                    </div>\n                  </SelectItem>\n\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </div>\n      </Select.Root>\n    </div>\n  );\n};","html":{"htmlTail":[]},"vue":{"vueCss":[],"vueTail":[]},"react":{"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      name: \"Danya\",\n      label: \"@danya\",\n      avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n    },\n    {\n      name: \"Osama\",\n      label: \"@osama\",\n      avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n    },\n    {\n      name: \"Loyan\",\n      label: \"@loyan\",\n      avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n    },\n    {\n      name: \"Carllose\",\n      label: \"@carllose\",\n      avatar:\n        \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f\",\n    },\n    {\n      name: \"Micheal\",\n      label: \"@micheal\",\n      avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\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 member\">\n              <div className=\"flex items-center gap-2\">\n                <img\n                  src={menuItems[selectedItemIdx].avatar}\n                  className=\"w-5 h-5 rounded-full\"\n                />\n                <div className=\"flex-1 text-left flex items-center gap-x-1\">\n                  {menuItems[selectedItemIdx].name}\n                  <span>{menuItems[selectedItemIdx].label}</span>\n                </div>\n              </div>\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)] 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                    <img src={item.avatar} className=\"w-5 h-5 rounded-full\" />\n                    <div className=\"flex-1 text-left flex items-center gap-x-1\">\n                      {item.name}\n                      <span className=\"text-sm\">{item.label}</span>\n                    </div>\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"}],"jsxCss":[]}}
slug: /select-menus
id: 480ee5e2-2c32-47bd-a581-757dbb5bff06
created_at: 1668384830563
---

<FUISelectMenuWithAvatars />