Multi Select box gives user flexibility to select multiple or single select options. It also used as parent child selection. Options are dynamic. Below points are configurable.
- Can be a single or multi select.
- Set a limit on selections
- Disable the whole select box at once.
- Can change appearance
- Maximum height of dropdown box.
- Maximum height of options box.
- Sort element by enabling sortBy.
- Can customize the theme.
npm install @uxpractice/ruc-lib
If users only need the multi select component, they can install it separately
npm install @ruc-lib/multi-select
for library
import { RuclibMultiSelectModule } from '@uxpractice/ruc-lib/multi-select'
for seperate package
import { RuclibMultiSelectModule } from '@ruc-lib/multi-select'
<uxp-ruclib-multi-select [dataSource]="dataSourceForMultiSelectData" [rucInputData]="inputObjectDataMulti" [customTheme]="customTheme" (rucEvent)="passEvent($event)"></uxp-ruclib-multi-select>
dataSource -> It is data to be passed in the multi-select component.
rucInputData -> It is the configuration to be passed in the multi-select component.
customTheme -> It is the name of the theme.
rucEvent -> is the event which will be fired when selection changes happens in multi-select.
dataSourceForMultiSelectData = {
singleSelection: false,
label: 'Cities',
showSelectAll: true,
showSelected: true,
appearance: 'outline',
scroll: true,
placeholder: 'Search or select from dropdown',
//limit : 5,
maxDropdownHeight: 200 /** height in px */,
// inputbox properties
// width: 100,
/** width in % */
maxHeight: 150 /** width in px */,
disabled: false,
//sort object
sortBy: 'id',
sortOrder: 'desc',
};
inputObjectDataMulti = {
{ text: 'Afghanistan', id: 'AF', isDisable: true },
{ text: 'Åland Islands', id: 'AX', isDisable: false },
{ text: 'Albania', id: 'AL', isDisable: false },
{ text: 'Algeria', id: 'DZ', isDisable: false },
}
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
Thank you for choosing the Multi Select Component Library. If you have any feedback or suggestions, please let us know!