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.

Component React

// Sample code

<MultiSelectDropdown
              onClose={(values) => {
                setSlectedOptions(values);
              }}
              defaultLabel="" // Default label for selected
              defaultUnit="" // Default unit for selected
              props={{
                className:'', // custom class name for digit-multiselectdropdown-wrap
                style:{} // custom styles for digit-multiselectdropdown-wrap
              }}
              isPropsNeeded={false}
              ServerStyle={{}} // custom styles for digit-multiselectdropdown-server
              config={{
                clearLabel: "", // label for clear all chip , default label is "Clear All"
                isDropdownWithChip: true, // flag to show chips
                showIcon: true, // flag to add icons for each options
                numberOfChips: 4, // count of the chips to be shown , if more selected adds + chip
              }}
              disabled={false} // disable multiselect dropdown
              selectAllLabel="" // label for select all
              categorySelectAllLabel="" // label for category level select all
              restrictSelection={false} // restricts to select any option
              isSearchable={true} // flag to make multiselect dropdown selectable
              chipsKey="" // what to be shown as label for chips
              frozenData={[
                {
                  code: "Category A.Option A",
                  name: "Option A",
                  icon: "Article",
                },
              ]}
              // can add frozen data
              handleViewMore={(e) => {
                setShowPopup(true);
              }} // when clicked on + chip this is called
              showTooltip={true} // flag to show the tooltip for labels and options on hover
              variant={"nestedmultiselect"} // varinat ("treemultiselect","nestedmultiselect","nestedtextmultiselect")
              onSelect={() => {}} // mandatory prop
              selected={[]} // selected array
              addSelectAllCheck={true} // flag to add select all check
              addCategorySelectAllCheck={true} // flag to add category select all check
              options={[
                {
                  name: "Category A",
                  options: [
                    {
                      code: "Category A.Option A",
                      name: "Option A",
                      icon: "Article",
                    },
                    {
                      code: "Category A.Option B",
                      name: "Option B",
                      icon: "Article",
                    },
                    {
                      code: "Category A.Option C",
                      name: "Option C",
                      icon: "Article",
                    },
                  ],
                  code: "Category A",
                },
                {
                  name: "Category B",
                  options: [
                    {
                      code: "Category B.Option 1",
                      name: "Option 1",
                      icon: "Article",
                    },
                    {
                      code: "Category B.Option 2",
                      name: "Option 2",
                      icon: "Article",
                    },
                    {
                      code: "Category B.Option 3",
                      name: "Option 3",
                      icon: "Article",
                    },
                  ],
                  code: "Category B",
                },
              ]} // options to be shown
              optionsKey={"code"} // key for the options
            ></MultiSelectDropdown>

Component Flutter

Component Design

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.

React

Property	Value	Default
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

Flutter

---

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

---

Date	Number	Notes
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.