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

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