# Dropdown - Multi Select 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.

{% tabs %} {% tab title="Component React" %} ``` // Sample code { 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 > ``` {% endtab %} {% tab title="Component Flutter" %} ``` // Sample code MultiSelectDropDown( isDisabled: false, onOptionSelected: (List selectedOptions) {}, options: const [ DropdownItem(code: '1', name: 'one', textIcon: Icons.article), DropdownItem(code: '2', name: 'two', textIcon: Icons.article), DropdownItem(code: '3', name: 'three', textIcon: Icons.article), DropdownItem(code: '4', name: 'four', textIcon: Icons.article), DropdownItem(code: '5', name: 'five', textIcon: Icons.article), ], ), ``` {% endtab %} {% tab title="Component Design" %} {% endtab %} {% endtabs %} ## 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.

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. {% tabs %} {% tab title="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

{% endtab %} {% tab title="Flutter" %}

Property	Value	Default
options	List<DropdownItem>	required
initialOptions	List<DropdownItem>	-
onOptionSelected	OnOptionSelect<T>	-
selectionType	SelectionType	-
suffixIcon	IconData	-
isDisabled	bool	false
readOnly	bool	false
isSearchable	bool	false
showSelectAll	bool	-
helpText	String	-
emptyItemText	String	-
selectAllText	String	-

{% endtab %} {% endtabs %} *** ## 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 ***


true	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
true	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
true	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).
true	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).
true	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
false	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
true	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
true	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
false	Writing guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
true	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
true	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
true	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.