Multiselect Dropdown

Design System - Loader component

The Checkbox is a simple selection control that allows users to make binary choices, such as selecting or deselecting options. It is commonly used in forms, preference settings, and multi-select scenarios, providing clear visual feedback for user actions.

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, // falg to show chips
                showIcon: true, // flag to add icons for each options
                numberOfChips: 4, // count of the chips to be showna , 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

// Sample code

DigitLoaders.showFullPageLoader(
        context: context,
        label: 'Loading...',
      ),

Component Design

Anatomy

---

Variants

---

	Checked The checked state indicates that the user has actively selected the option. It provides clear visual feedback with a filled checkbox, often accompanied by a checkmark. This state should be used when an option is explicitly chosen or enabled by default.
	Intermediate The indeterminate state represents a mixed selection, typically used for parent checkboxes in multi-select scenarios. It visually signals that only some child options are selected, rather than all. This state does not appear by direct user interaction but is controlled programmatically to reflect partial selections.
	Unchecked The unchecked state indicates that the option is not selected. It appears as an empty checkbox, providing a clear visual cue that no action has been taken. This is the default state unless specified otherwise.

Properties

Label This property represents the text displayed inside the button. It is a required field and helps users understand the action that the button will trigger. The label should be concise and clear to communicate the button’s purpose effectively.
Disabled The “isDisabled” property disables the button, preventing any user interaction. It also applies a disabled visual style (like graying out the button) to indicate that the button is not active.
Icon The icon property specifies the name of the icon to be rendered inside the button. This helps provide a visual cue along with the button text. The icon placement can be either before or after the label based on the how the “Prefix” and “Suffix” properties are defined.
Size The size property specifies the size of the button. You can choose between "large", "medium", and "small" to adjust the button's height and font size.
Type The type property determines the HTML type attribute for the button, such as "submit", "button", or "actionButton". This is useful for form submission or defining button behavior in HTML forms.

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	array	-
optionsKey	string	-
selected	array	[]
onSelect	function	-
onClose	function	-
defaultLabel	string	-
defaultUnit	string	-
props	object	-
isPropsNeeded	boolean	false
ServerStyle	object	{}
config	object	-
disabled	boolean	false
variant	string	-
addSelectAllCheck	boolean	false
addCategorySelectAllCheck	boolean	false
selectAllLabel	string	-
categorySelectAllLabel	string	-
restrictSelection	boolean	-
isSearchable	boolean	false
chipsKey	string	-
frozenData	array	[]
handleViewMore	function	-
showTooltip	boolean	false

Flutter

Property	Value	Default
DigitLaoder.inlineLoader	function	-
DigitLoader.showFullPageLoader	function	-
DigitLoader.overlayLoader	function	-
context	BuildContext	-
label	string	-
barrierDismissible	bool	false

Interaction State

---

Hover State When a user hovers over the button, a visual cue is added to emphasize interactivity. This is achieved by introducing a subtle line below the button. The line appears as a clean, horizontal underline that complements the button's style, without overwhelming the design. The hover state enhances the button's affordance, guiding users and improving interactivity without altering the button’s primary layout or design.

Mousedown State The Mouse Down state of the button represents the moment when the user clicks and holds the button. This state provides immediate feedback to the user, confirming that their interaction has been registered. The text label becomes bolder, emphasizing the active interaction

Usage Guide

---

	Use for compact information display Organise dense or hierarchical content like FAQs, step-by-step instructions

Change log

---

Date	Number	Notes

Design Checklist

---

	All interactive states
	Accessible use of colours
	Accessible contrast for text
	Accessible contrast for UI components
	Keyboard interactions