MultiSelect

MultiSelect picker component for primitive and list of objects.

Usage

function MultiSelectUsage() {
  return <MultiSelect options={OPTIONS} />
}

Default Value

function MultiSelectDefaultValue() {
  return <MultiSelect options={OPTIONS} defaultValue={[2, 4]} />
}

Clearable

function MultiSelectClearable() {
  return <MultiSelect options={OPTIONS} clearable />
}

Controlled

function MultiSelectControlled() {
  const [selectedValues, setSelectedValues] = useState<number[]>([])

  return (
    <MultiSelect
      options={OPTIONS}
      values={selectedValues}
      onValuesChange={(items) => setSelectedValues(items)}
    />
  )
}

Disabled

function MultiSelectDisabled() {
  return <MultiSelect disabled options={OPTIONS} />
}

MaxSelect

function MultiSelectMaxSelect() {
  return (
    <MultiSelect
      options={OPTIONS}
      maxSelectCount={2}
      label="Select upto 2 options"
    />
  )
}

List of Objects

function MultiSelectObjectOptions() {
  const FRUIT_LIST = [
    {
      label: 'Red Apple',
      value: {id: 1, name: 'Apple'},
    },
    {
      label: 'Orange Orange',
      value: {id: 2, name: 'Orange'},
    },
    {
      label: 'Yellow Mango',
      value: {id: 3, name: 'Mango'},
    },
    {
      label: 'Yellow Papaya',
      value: {id: 4, name: 'Papaya'},
    },
  ]

  return <MultiSelect options={FRUIT_LIST} />
}

Props

Prop	Data Type	Default Value	Description
Extends	Omit<SelectProps<ItemT>, 'value' | 'onValueChange' | 'defaultValue'>	--	Inherits properties from Omit<SelectProps<ItemT>, 'value' | 'onValueChange' | 'defaultValue'>
values	ItemT[]	--	List of selected item values
defaultValue	ItemT[]	--	List of default item values
onValuesChange	(selectedValues: ItemT[], selectedItems: SelectItemT<ItemT>[]) => void	--	Callback on select item press
maxSelectCount	number	--	Limit the selection to max count