Multi- Select

npm install empower-inputs --save

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')}
      />
    </>
  )

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')}
      />
    </>
  )