MultiSelect

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		string
caption	false		string
value	false		MultiSelectOption[]
defaultValue	false		MultiSelectOption[]
options	false		MultiSelectOption[]
placeholder	false		string
searchQuery	false		string | null
setSearchQuery	false		(query: string | null) => void
onChange	false		(options: MultiSelectOption[]) => void
maxSelected	false		number
onMaxSelected	false		(maxLimit: number) => void
disabled	false		boolean
className	false		string
disallowCreation	false		boolean
isLoading	false		boolean