Filters with nested groups

[ankigupta92]

Hello, do we have any best practices for filters that have nested checkbox groups. I have tried to visualize this in 2 options, open to additional options!
Option 1: Nested group is broken down into tabs (parent) and list items (nested children)

Option 2: checkbox group with parent labels and nested checkboxes. This design won't scale well when the list gets really long and user needs to scroll to get to the last parent checkbox group.

[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.

---

For filters that have nested checkbox groups, based on the Paste documentation provided, it seems like there isn't a direct example or recommendation for exactly this scenario. However, we can derive some best practices from related guidance in the documentation.

1. Using Accordions with Checkboxes: From the "Recommendation for accordions with checkboxes" section, it's suggested that for complex nesting, a Tree component would be ideal to communicate the hierarchy clearly, especially to screen readers. Since Paste doesn't have a Tree component yet, an alternative recommendation is to simplify the list to 2 levels and use Checkbox Groups inside each Disclosure (Accordion). This approach makes the relationship between checkboxes and their labels more straightforward and could be adapted to your Option 2. This would involve having a parent label as an accordion that can be expanded to show the nested checkboxes.

2. Groupings within Combobox: While this section discusses comboboxes, the underlying need for clear groupings due to long lists is similar to your scenario. The documentation doesn't provide a direct solution for nested dropdowns or comboboxes, but the discussion around needing clear groupings for user-friendly design applies to your case as well. This suggests that any solution should prioritize clear visual hierarchy and ease of navigation for the user, which might lean towards your Option 1 if you can ensure that tabs (parent) and list items (nested children) are clearly organized and accessible.

3. Checkbox Group: The basic guidance for checkbox groups emphasizes grouping multiple binary choices together with a common group component, ensuring users understand the options' collection and relation to each other. This principle supports your Option 2, stressing the importance of clear grouping but also highlights the potential scalability issue you mentioned.

Given these insights, a modified approach combining these recommendations could be your best practice:

• Consider using accordions to manage parent categories, with nested checkboxes for child options. This aligns with the accordion and checkbox recommendation and addresses scalability by allowing users to expand/collapse groups as needed.
• Ensure each group and nested group is clearly labeled, possibly using headings for parent categories to improve accessibility and clarity, as suggested in the accordion recommendation.

Unfortunately, without a direct example or code snippet for nested checkbox groups in the provided documentation, this recommendation is derived from related best practices within Paste. For implementation details or further guidance, consulting the Paste documentation directly or reaching out to the Paste team might provide additional insights.

For more information on Accordions and Checkboxes in Paste, you can visit:

• Accordions: https://paste.twilio.design/components/accordion
• Checkboxes: https://paste.twilio.design/components/checkbox

Sorry, I don't have a direct code snippet or further documentation link specifically for nested checkbox groups as described in your question.

I also did a search, 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:

• Groupings within combobox (updated: 06/13/2022, similarity score: 87%)
• Checklist with sub options - Answer (updated: 11/29/2023, similarity score: 85%)
• Nested tabs in a table (updated: 11/16/2023, similarity score: 85%)

[roxanagomez]

Hey @ankigupta92, thank you for sharing this!

Before we recommend a filtering pattern, it would be helpful to understand a bit more about the context:

• Where are the filters placed in the interface (e.g., a dashboard, table view, search results)?
• How many filter categories (e.g., Databricks, Snowflake, etc.) do you expect to have? Could that number grow over time?
• Will users typically use all of the filters, or do they tend to rely on a consistent subset each session?

[roxanagomez]

Hey @ankigupta92 checking back on this discussion, do you still need support for this request? if so it might be easier to collaborate on this in Figma, so if you have a link ready, please share!

[ankigupta92]

Hey Roxana! The project scope has been reduced and might restart in the future. I can start a new conversation when that happens, thank you!

[roxanagomez]

Thank you for the follow up! I’ll mark this as completed. Feel free to start a new conversation or join us for Office Hours whenever you need.