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 } from '@harnessio/ui/components'

//...

return (
  <MultiSelect
    label="Select options"
    searchValue="search value"
    placeholder="Select options"
    error="Please select at least one option"
    selectedItems={[{ label: 'Option 2', id: 'option2' }]}
    options={[
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' }
    ]}
    handleChange={(selected) => console.log(selected)}
    handleChangeSearchValue={(searchValue) => console.log(searchValue)}
    customOptionElem={(data) => <b>{data.label}</b>}
  />
)

API Reference

Prop	Required	Default	Type
selectedItems	true
t	true
placeholder	true
handleChange	true
options	true
searchValue	false		string
handleChangeSearchValue	false
customOptionElem	false
error	false
label	false