Group/label being unselectable in a combobox

[pguptaDS]

Hey team! I wanted to follow up our discussion from crit on using comboboxes here as I don't want to loose a day.

This is how I was using a combobox to show hierarchy of accounts and subaccounts. However, I learned that group/labels(?), "Account 1" in this example, are not clickable. In my use case, the user needs to be able to click on "Account 1" as well as "Subaccount 1". Since "Account 1" is a superset of all the subaccount, Aayush suggested to show "Account 1" as a Group name and have a separate "Select All Subaccounts" as a top item under that group and then have individual subaccount names as well. I like this approach except I am not sure how would this work when you only have Accounts and there are no subaccounts under it. For context if that helps, we will be showing the friendly names of Accounts and subaccounts here so the name themselves won't be as self-explanatory as they are in this example.

I'd appreciate if you can help me brainstorm a solution using Paste components for this. Thank you!

[richbachman]

Hi @pguptaDS. Thanks for sending this topic over to the team. After discussing with the team, I've worked up a couple of prototypes using Paste. You can see them here: https://1zmev.csb.app/

Option 1

This uses the Combobox. Accounts 1 and 3 have sub-accounts, and Accounts 2 and 4 don't so those are selectable items.

Option 2

This idea uses our Select component. The basic idea is to use the first select to choose the main account, and another to choose the sub-account or all accounts. This could be taken a bit further by hiding the second select, and only showing it if the main account has sub-accounts.

Let us know what you think about those ideas. Thanks!

[pguptaDS]

Thank you so very much for this response, Rich! This is very helpful. I think Option 1 should suffice as its the closest to our intended design. I am going to take it to my PM and discuss with her. Once again, super helpful to have this prototype :)