Multi- Select
Description
A component wherein a user can select specific item or items from a range of options.
Â
System Dependencies
Installation
The package can be installed via npm:
npm install empower-inputs --save
Standard Select
Â
Configuration
import { InputSelectionHandler} from 'empower-inputs';
let [formElement, setFormElement] = useState({
sampleMultiSelect: {
id: 'sampleMultiSelect',
type: 'multi-select',
placeholder: 'Please select multiple option',
value: [],
disabled: false,
options: [
{
label: "Leave",
value: "file-leave",
},
{
label: "Overtime",
value: "file-overtime",
},
{
label: "DTR Amendment",
value: "file-amendment",
},
{
label: "Change Shift",
value: "view-shift-schedule",
},
]
}
});
..............
return (
<>
<h4>MULTI-SELECT</h4>
<InputSelectionHandler
config={formElement.sampleMultiSelect}
customClass="multi-select-custom-class"
onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelect')}
/>
</>
)
Â
Multi- Select with Group Option
Â
Configuration
let [formElement, setFormElement] = useState<IState['formElement']>({
sampleMultiSelectGroupOption: {
id: 'sampleMultiSelectGroupOption',
type: 'multi-select',
placeholder: 'Please select multiple option',
value: [],
disabled: false,
options: {
'sample-group-1': {
label: 'Sample Group 1',
options: [
{
label: 'Option 1',
value: 'option-1'
},
{
label: 'Option 2',
value: 'option-2'
},
]
},
'sample-group-2': {
label: 'Sample Group 2',
options: [
{
label: 'Option 3',
value: 'option-3'
},
{
label: 'Option 4',
value: 'option-4'
},
]
},
'sample-group-3': {
label: 'Sample Group 2',
options: [
{
label: 'Option 5',
value: 'option-5'
},
{
label: 'Option 6',
value: 'option-6'
},
]
}
}
}
});
..............
return (
<>
<h4>MULTI-SELECT GROUP OPTIONS</h4>
<InputSelectionHandler
config={formElement.sampleMultiSelectGroupOption}
customClass="multi-select-group-options-custom-class"
onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelectGroupOption')}
/>
</>
)
Â
Â
 Properties
Parent Parameter | Sub Parameter | Data Type | Constraint |
---|---|---|---|
config | Â | JSON Object | Required |
 | id | String | Required |
 | type | String | Required |
 | label | String | Optional |
 | value | Array Object | Required |
 | placeholder | String | Optional |
 | readOnly | Boolean | Optional |
 | required | Boolean | Boolean |
 | disabled | Boolean | Boolean |
 | options | Array Object | Required |
 | info | JSON Object | String | Optional |
customClass | Â | String | Optional |
onChanged | Â | Event Method | Required |
References
Repository Link: https://gitlab.com/empowerteams/empower-inputs.git
NPM Package: npm: empower-inputs
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git