MultiSelect V2

The MultiSelect component allows users to select multiple options from a dropdown list. It is useful for scenarios where multiple selections are needed.

Usage

import { MultiSelectV2 } from "@harnessio/ui/components";
import { useState } from "react";

// Basic usage with controlled component
const MyComponent = () => {
  const [selected, setSelected] = useState<MultiSelectOption[]>([]);

  return (
    <MultiSelectV2.MultiSelect
      label="Select frameworks"
      placeholder="Select options..."
      options={[{ key: "react" }, { key: "vue" }, { key: "angular" }]}
      value={selected}
      onChange={setSelected}
    />
  );
};

MultiSelectOption Type

interface MultiSelectOption {
  id: string | number; // Required - the unique identifier for the option
  key: string; // Required - the main identifier for the option
  value?: string; // Optional - used for key-value pairs
  disable?: boolean; // Optional - disables the option in the dropdown
  onReset?: () => void; // Optional - custom reset handler for the option
}

API Reference

Prop	Required	Default	Type
label	false
caption	false
value	false
defaultValue	false
options	false
placeholder	false
searchQuery	false
setSearchQuery	false
onChange	false
maxSelected	false
onMaxSelected	false
disabled	false
className	false
disallowCreation	false
isLoading	false