MultiSelect

Installation

npx gbs-add-block@latest -a MultiSelect

The MultiSelect component is a customizable dropdown selection box that allows users to select multiple items from a list. It includes features such as a search bar, clear selection option, and dynamic data loading. This documentation outlines the component's props, usage, and key functionalities.

Props Table

Usage Guide

To use the MultiSelect component, import it into your React application and manage the selected items through a state variable. Below is an example usage of the MultiSelect component:

import React, { useState } from "react";
import { MultiSelect } from "./path/to/MultiSelect";

const ExampleComponent = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleSelect = (selected) => {
    setSelectedItems(selected);
  };

  const items = [
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "cherry", label: "Cherry" },
    { value: "date", label: "Date" },
  ];

  return (
    <div>
      <MultiSelect
        placeholder="Select Fruits"
        items={items}
        selectedItems={selectedItems}
        onSelect={handleSelect}
        showSearch={true}
      />
      <div>
        <h3>Selected Items:</h3>
        <ul>
          {selectedItems.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ExampleComponent;

Key Functionalities

• Multiple Item Selection: Users can select multiple items from the dropdown list.
• Search Feature: The showSearch prop enables a search input to filter the displayed items.
• Dynamic Data Loading: The component can handle both static item arrays and dynamic loading from an API endpoint.
• Clear Selection: Users can clear all selected items with a clear button.

Notes

• Ensure to provide items as an array of objects with value and label properties for proper functionality.
• Use the onSelect prop to handle changes in the selection state.
• The truncate prop can be set to false if you want to display all selected items without truncation.