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

Multi-select input component with typeahead filtering, built on PatternFly and Formik.

Install

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

Usage

import { FormMultiSelectInput } from "@rhc-shared-components/form-multi-select-component";
import { Form, Formik } from "formik";
import type { SelectOptionProps } from "@patternfly/react-core";

const options: SelectOptionProps[] = [
  { value: "Accounting", children: "Accounting" },
  { value: "API Management", children: "API Management" },
  { value: "Automation", children: "Automation" },
];

const App = () => (
  <Formik initialValues={{ multi: [] }} onSubmit={() => {}}>
    <Form>
      <FormMultiSelectInput
        name="multi"
        label="Industries"
        placeholder="Select"
        helperText="Select up to 3 industries"
        selectMenuOptions={options}
        isRequired
      />
    </Form>
  </Formik>
);

Development

yarn dev       # Start dev server
yarn build     # Build the library
yarn lint      # Check with Biome
yarn lint-fix  # Auto-fix lint issues