@rhc-shared-components/form-multi-select-component

@rhc-shared-components/sample-project

project description

Install

npm install --save @rhc-shared-components/form-multi-select-component

Usage

import React from 'react';

import { FormMultiSelectInput } from '@rhc-shared-components/form-multi-select-component';
import { IMultiSelectItem } from '../../dist/FormMultiSelect';
import { Form, Formik } from 'formik';

const App = () => {
  const FieldName = 'form multi select';
  const options = [
    'Accounting',
    'API Management',
    'Application Delivery',
    'Application Server',
    'Automation',
    'Backup & Recovery',
    'Business Intelligence',
    'Business Process Management',
    'Capacity Management'
  ];
  const getActions = () => {
    const getAllOptions: IMultiSelectItem[] = options.map((item) => ({
      value: item
    }));
    return getAllOptions;
  };

  return (
    <Formik
      initialValues={{
        [FieldName]: 'test'
      }}
      enableReinitialize={true}
      onSubmit={() => {}}
    >
      <Form>
        <FormMultiSelectInput
          name={FieldName}
          maxHeight={200}
          label='Industries'
          placeholder='Select'
          helperText='Select upto 3 industries'
          selectOptions={getActions()}
          isRequired
          maxItems={3}
        />
      </Form>
    </Formik>
  );
};

export default App;