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"
    />
  )
}

Custom Style

function MultiSelectCustomStyle() {
  return (
    <MultiSelect
      options={OPTIONS}
      label="Custom Select Label"
      inputProps={{
        inputContainerStyle: {
          backgroundColor: 'cyan',
          borderColor: 'blue',
          borderWidth: 2,
        },
      }}
    />
  )
}

Custom Picker Style

function MultiSelectCustomPickerStyle() {
  const [selectedOptions, setSelectedOptions] = useState<number[]>([])

  return (
    <MultiSelect
      options={OPTIONS}
      label="Custom Select Label"
      placeholder="Custom Select Label"
      pickerProps={{
        style: {
          backgroundColor: 'yellow',
        },
      }}
      values={selectedOptions}
      renderItem={({item}) => (
        <Checkbox
          label={item.label}
          adjacent={false}
          position="right"
          disabled={item.disabled}
          style={{
            marginVertical: 4,
          }}
          value={selectedOptions.includes(item.value)}
        />
      )}
      onValuesChange={(values) => setSelectedOptions(values)}
    />
  )
}

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