DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.
Single Select Drop-down
The Single Select drop-down in Digit UI Components provides a drop-down menu for users to make a single selection. It supports various features such as item filtering and selection handling. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.
Sub-Types
Default drop-down
Nested drop-down
Tree drop-down
Properties
Below are some required parameters:
Name Description
textEditingController controller for managing the text
onChange a callback when a new option is selected
items A list of DropdownItem representing the options
These are some additional customisation parameters:
suffixIcon modify the suffixIcon to open dropdown
dropdownType dropdown can be nested dropdown( type is mandatory in
nested dropdown item list)
emptyItemText Text to display when empty options are sent or no match
is found during searching
isSearchable flag indicating if the dropdown should support filtering
option
selectedOption the default selected option
isDisabled flag indicating where dropdown is disabled(default: false)
DropdownItem
Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.
There are the customisations available inside the drop-down item:
code(required) unique identifier for option
name(required) the label or name of dropdown option
description additional description for the dropdown option
textIcon Icon to be displayed inside the dropdown option
textIcon Icon to be displayed inside the dropdown option
type in case of nested dropdown type will be sent
TreeNode
Inside the tree node we can pass a list of children associated with a node:
code(required) unique identifier for that node
name(required) displaying the name or label for the node
The Multi-Select drop-down in DIGIT UI components offers a user-friendly interface for selecting multiple options simultaneously. This clean and intuitive component is equipped with built-in chips and provides responsive mouse-down and hover effects.
Sub-Types
Default drop-down
Nested drop-down
Tree drop-down
Properties
Below are some required parameters:
Name Description
options A list of DropdownItem representing options
onOptionSelected callback function when an option is selected
These are some additional parameters:
selectionType nested Selected(type is required inside DropdownItem)
selectedOptions List of DropdownItem, which will be selected by default
selectedOptions List of DropdownItem, which will be selected by
default
chipConfig configuration of appearance of selected option
suffixIcon custom suffix icon
focusNode a focus node can be passed, to control focus
isDisabled whether dropdown is enabled or disabled
clearAllText Text for Clear all button in chip selection
valueMapper mapper to show selected option inside the chip