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