Select Panel
ProA searchable dropdown panel with checkboxes for selecting one or more items from a large list. Combines a search filter, scrollable option list with checkboxes, and an action footer. Commonly used for assigning labels, filtering columns, or picking team members.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Dropdown panel with a search bar, checkbox list, and apply/clear footer. | Use for filtering or assigning from a large list — labels, team members, column filters. |
| With Categories | ||
| Multi |
Usage Guidelines
Do
Include a search/filter input at the top for quick discovery.
Don't
Use for fewer than 7 items — use a Checkbox group or Multi-Select instead.
Do
Show a count of selected items in the trigger button.
Don't
Remove the search filter — it is essential for large lists.
Do
Provide "Clear all" and "Apply" actions in the footer.
Don't
Auto-apply selections — let the user review and confirm via the Apply button.
Code
Design Tokens
Accessibility
- Panel uses role="dialog" with aria-label describing its purpose.
- Search input within the panel is auto-focused on open.
- Checkbox options use standard checkbox semantics — no custom roles needed.
- Footer actions are focusable and reachable via Tab from the option list.
- Escape closes the panel and returns focus to the trigger button.