Dropdown - Multi Select
Design System - Multi Select component
The Multi Select dropdown component enables users to select multiple options from a structured list. It is designed to enhance efficiency in scenarios where bulk selection is necessary, such as filtering results, assigning categories, or selecting roles. This component supports flexible content types, hierarchical grouping, and contextual help to guide user interaction.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Basic Dropdown
A standard list of multiple checkboxes allowing users to select one or more options. Each selected option appears in the input field as a chip.
Categorical Dropdown
Organises options under headings or categories, improving readability and helping users quickly locate desired items.
Nested Text Dropdown
Presents each option with supporting secondary text or descriptions, ideal for selections that require additional context.
Profile Dropdown
Options are displayed as user profiles (with avatar, name, etc.), allowing users to select multiple people or roles.
Profile with Nested Text Dropdown
Combines profile visuals with supporting subtext.
Tree Dropdown
Allows parent-child groupings with collapsible nodes, helpful in scenarios like selecting locations, organizational units, or tags with hierarchy.
Interaction States
Hover State
When the user hovers over the field or an item, it highlights to indicate interactivity and help the user discover selectable areas.
Selected State
Selected items are visually highlighted as rows inside the dropdown and as removable chips in the input field.
Properties
Disabled
Renders the dropdown non-interactive and visually muted. Used when the selection is temporarily or conditionally unavailable.
Error
Displays a red outline with an error message for validation feedback when the selection fails to meet the criteria.
Non Editable
Locks the field from further changes but still shows existing selections for reference.
Icon
Shows a dropdown arrow or custom icons to indicate collapsibility and affordance.
Label
Text placed above the field to indicate the purpose or category of the dropdown.
Help Text
Optional guidance placed below the dropdown to clarify intent, usage, or rules.
Select Users
Allows users to quickly select or deselect all visible options within the dropdown. Especially useful in long or grouped lists.
Chips for Multi Select
Each selected item is displayed as a dismissible chip within the collapsed field, providing a clear summary of the user's selections.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
options
text
optionsKey
text
selected
yes/no
no
onSelect
yes/no
no
onClose
number
defaultLabel
yes/no
defaultUnit
yes/no
no
props
yes/no
no
isPropsNeeded
yes/no
no
serverStyle
number
no
config
yes/no
no
disabled
text
no
variant
yes/no
no
addSelectAllCheck
yes/no
addCategorySelectAllCheck
yes/no
selectAllLabel
yes/no
categorySelectAllLabel
yes/no
restrictSelection
yes/no
isSearchable
yes/no
chipsKey
yes/no
frozenData
yes/no
handleViewMore
yes/no
Behaviours
Chip Wrapping
When multiple items are selected, the chips automatically wrap to a new line without breaking layout or readability.
Usage Guide
Use only for the selection of more than one
Use the Dropdown – Multi Select when users need to choose multiple options from a list. It is ideal for scenarios like assigning roles, filtering data, or selecting categories. If only one option needs to be selected, prefer using the Dropdown – Single Select for a simpler and more focused user experience.
Changelog
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?