Multi-Select Searchable

🧭 When to Use a Multi-Select Searchable

Use this component when:

• You have a long list of items or filters

• Users need to select multiple values from a searchable dataset

• A clean dropdown interface is needed to replace a bulky form section

This pattern is perfect for:

• Filter menus

• Tag selectors

• Category and label assignment

• Assigning people or roles

🧩 Component Structure

This component combines three key elements:

• Search Field – A lightweight input embedded at the top of the menu. As the user types, items filter in real-time.

• Menu – Displays all options below the search field. Uses checkboxes or visual tags to reflect selected items.

• Selection Display (Optional) – Selected items can be displayed inside the input field as tokens or tags when the menu is collapsed.

All layers are structured in Figma so you can easily hide/show the search bar, toggle selected states, and customize the results area.

🎨 Types and Visual Styles

The menu inherits styles from the core Menu component and supports:

• Subtle and Filled menu styling

• Optional subtext layers for each item

• Tag-style selected states

• Optional leading icons or avatars for each option

Search styling matches standard input styles, including label, hover, and error states.

🎯 Interaction States

• Default – Closed menu with no selection or user interaction

• Hover – Triggered when hovering over items or the field

• Focused – When the user is typing in the search field

• Selected – Items appear visually tagged or checked

• Disabled – Field is not interactive and cannot be opened

Each state is accessible via variant toggles or layer visibility in Figma.

⚙️ Functionality Modifiers

• Search Enabled – Shows/hides the search field

• Checkbox or Tag Mode – Items can be rendered as checkboxes or appear as selected tags inside the input field

• Clear All – Optional icon/button to clear selections

• Max Height Scroll – Enables scroll when item list exceeds vertical height

♿ Accessibility Considerations

From a design perspective:

• Ensure each item maintains a minimum 44px height

• Include a visual focus indicator in the search field

• Display selected states clearly with contrast-compliant highlights

From a code perspective (if implemented):

• Use aria-multiselectable and aria-selected attributes

• The search field should use a standard input with aria-controls pointing to the results list

• Support keyboard navigation: arrows to move, space/enter to select, esc to close

✅ Best Practices

• Group long lists alphabetically or by category to improve scanning

• Debounce search results if fetching from a source

• Don’t overload users with too many selected tags—collapse excess if needed

• Always provide a fallback state like “No results found” or “No items selected”