Account Selection

[amyodea]

Hey Team!

We are redesigning our invite flow and will now be allowing customers to invite to both accounts and subaccounts. I am looking for feedback and guidance on how we should be showing the difference between the two within the combo-box dropdown.

We also have a scenario where customers may have a main account with X amount of subaccounts, so we need to communicate to the user that they will also get access to those too if they select that main account.

I'd like guidance on where the best positioning for this badge would be and if you have any other feedback on this. Thank you team!

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Badge color options (updated: 06/22/2022, similarity score: 89%)
• Account Switcher in Console (updated: 07/11/2024, similarity score: 87%)
• Account Switcher (updated: 10/29/2024, similarity score: 86%)

[amyodea]

Hey Team!

Just wanted to add another piece around this one that has come up. The user can only select a max of 5 accounts in the switcher. My thought was, if the user goes to select their 6th account, we should close the DD, and show an error message telling them that they can only select 5 accounts.

The team tell me we can't close the dropdown by default, so was looking for any work arounds here or ideas you have for this? We also are seeing the dropdown appear above the field at points too which is disorientating for the user.

Any guidance would be appreciated, thank you!

[jhanvi1399]

Hi @amyodea! Thank you for this discussion.
Below is a consolidated response to address your questions and provide some recommendations the team had:

1. Designing the Combo-Box for Accounts and Subaccounts

   • Badges vs Text Formatting: Badges work well for highlighting information that isn’t repeated across all options but stands out as unique. For the account vs. subaccount distinction, we suggest using text formatting (like bold or italic) instead of badges. This keeps the interface cleaner and still communicates the necessary information.

   • Another option is to consider Group Labels: You could consider using group labels to indicate the relationship between a main account and its subaccounts. However, there is a potential problem with the design: if the main account is used both as a group label and as an individual selectable option (i.e., it appears in the list of available options to select), it could feel redundant. 
The team did some explorations - please check them here.

2. Max Selection Limit of 5 Accounts:

We would suggest to not close the combobox should automatically, as a user might be trying stuff out and not necessarily making a decision. You can consider displaying the selection limit (e.g., "Select up to 5 accounts") in the label or help text. Once 5 accounts are selected, disable further options while keeping the dropdown open for easy unselection. If the user tries to select more than 5, show an error message to indicate the limit has been reached(the engineers need to pass the hasError prop to the component for this.)


I hope this is helpful! If you'd like to chat about this with the team, feel free to sign up for an Office Hours slot. You can also continue the discussion in this thread if you want to keep it async.

Best,

Jhanvi