- Guidelines
- React API Reference
Multi Select components provide a space-efficient way to select multiple items from a longer list of options, combining the functionality of a dropdown and checkboxes.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use Multi Select when users need to select multiple items from a list with many options. |
| Content | Keep option labels clear and concise. Group related options when the list is long. |
| Behavior | Allow users to select multiple options, search for options, and clear selections. Show selected items as badges. |
| States | Clearly indicate which options are selected. Provide visual feedback for hover, focus, and disabled states. |
| Feedback | Show checkboxes for selection state. Allow users to remove individual selections or clear all. |
| Examples | Filtering by multiple categories, selecting multiple team members, choosing multiple features or preferences. |
Best Practices
- Clear Selection Indication: Display selected options as badges within the trigger element.
- Search Functionality: Include search for faster access when there are many options.
- Manageable Display: Limit visible selected items when many are selected.
- Accessible Controls: Ensure the component is keyboard navigable and screen reader friendly.
- Efficient Batch Operations: Include “Select All” and “Clear” options for convenience.
Do’s and Don’ts
Do
- Use when multiple selections from a longer list are needed. * Provide clear visual cues for selected items. * Include search functionality for longer lists. * Allow users to remove individual selections directly from badges.
Don't
- Use when a single selection is more appropriate. * Hide important options in a dropdown without indication. * Omit search functionality when there are many options. * Make the component overly complex with too many nested levels.
Additional Guidance
- Psychological Impact:
- Reduced Choice Paralysis: Breaking selection into a two-step process (open dropdown, then select) can make many choices feel more manageable.
- Visual Confirmation: Badges provide immediate visual feedback about what has been selected.
- Progressive Disclosure: The dropdown pattern keeps the interface clean while making all options accessible when needed.