Select with submenu?

[DPCamino]

Would appreciate some guidance with choosing the appropriate component. I’m looking for a select like input for a form that requires submenu options. The type of field that closely matches is a Select or Dropdown component.

The Dropdown component is already equipped to handle submenus, I’m just not sure if it’s appropriate for a form. I would need to change the button to display the option text value selected. Perhaps also change “role” as well for screen readers?

Alternatively, the Select component is clearly the intended component for my requirement, but doesn’t have a submenu option. Are there examples of Select components with submenus, perhaps integrated with Popover? Or perhaps there is another way to integrate submenus on Select?

Thank you!

[joaom00]

Certainly the most appropriate component in your case would be the Select but having a sub menu is a little unusual since I don't know of any implementation of a select that has sub menus like in a dropdown 🤔.

Maybe you don't want to separe into groups? instead of sub menus

[DPCamino]

Thanks for the feedback.

Presently, the list of options is very long. There are distinct groups and that was the basis for submenu headings. I see I can also add group heading within the list of options, but the pain point is having to scroll down a large list of options (a task repeated anywhere from 10-20 times per form with the same input).

I considered a Combobox (I don't believe Radix has that... yet), but not sure that's even a better option. The list of options are not always things you'd expect or know (such as using a combobox for geographical locations, or a list of commands you know, etc). It's a consideration, but properly implementing a combobox isn't trivial either it seems.

I've considered breaking this up into 2 select inputs, where you select a group first and the second input options update dynamically based on the first (not sure if I prefer that to having a dropdown with submenus, which IMO is a known pattern for users in other components and user interfaces).

[pavelbe]

Hello! 🌟 I was wondering if you were able to find or develop a solution for the Select component with submenus? 🤔 If so, could you share an example of the code or the approach you used to solve this issue? 📝 Your thoughts on the possibility of using a Combobox and splitting it into two Select inputs were very interesting, and it would be great to know which path you ultimately chose. 🛤️ Thank you for your feedback and willingness to share your experience! 🙏

[pavelbe]

Hello! 🌟 I was wondering if you were able to find or develop a solution for the Select component with submenus? 🤔 If so, could you share an example of the code or the approach you used to solve this issue? 📝 Your thoughts on the possibility of using a Combobox and splitting it into two Select inputs were very interesting, and it would be great to know which path you ultimately chose. 🛤️ Thank you for your feedback and willingness to share your experience! 🙏