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 { MultiSelect, MultiSelectOption } from "@harnessio/ui/components";
import { useState } from "react";

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

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

Disallow Creation

The MultiSelect component accepts an optional disallowCreation prop. When set to true, it disables the ability to add new items that are not part of the existing options list.

Form Integration

The MultiSelect component integrates seamlessly with form elements like labels, captions, and validation messages.

Orientation

The MultiSelect component accepts an optional orientation prop, which defines the layout direction of the input and its label. Available options are horizontal and vertical (default).

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
optional	false	false	boolean
theme	false	'default'	'default' | 'danger' | 'warning'
caption	false		string
error	false		string
warning	false		string
rootClassName	false		string
orientation	false	'vertical'	'vertical' | 'horizontal'