MultiSelect

Component for selecting multiple options from a list of options. Supports clearable, controlled, and customizable behavior.

The following option data will be used in the below demos:

const OPTIONS = Array(25)
  .fill(0)
  .map((_, i) => ({
    label: `Option ${i}`,
    value: i,
    disabled: i % 4 === 0,
  }));

Usage

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

Default Value

Use the defaultValue prop to preselect options when the component mounts.

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

MultiSelect Mode

function MultiSelectMode() {
  return (
    <View>
      <MultiSelect
        label="Inline Mode"
        placeholder="Select An Option"
        mode="inline"
        options={OPTIONS}
      />
      <MultiSelect
        label="bottom-sheet Mode"
        placeholder="Select An Option"
        mode="bottom-sheet"
        options={OPTIONS}
      />
    </View>
  )
}

Clearable

Enable the clearable prop to allow users to remove all selected options at once from the right clear icon.

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

Controlled

Use values and onValuesChange props to fully control the selection state externally.

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

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

Disabled

Use the disabled prop to make the MultiSelect non-interactive.

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

Max Select

Use the maxSelect prop to limit the number of options a user can select.

function MultiSelectMaxSelect() {
  return (
    <View>
      <MultiSelect
        label="Inline Mode"
        placeholder="Select upto 2 options"
        mode="inline"
        maxSelectCount={2}
        options={OPTIONS}
      />
      <MultiSelect
        label="bottom-sheet Mode"
        placeholder="Select upto 2 options"
        mode="bottom-sheet"
        maxSelectCount={2}
        options={OPTIONS}
      />
    </View>
  )
}

Custom Style

Use inputProps prop to override input container styling.

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

Custom Picker Style

Use pickerProps prop to customize the dropdown/picker appearance.

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

Use object-based options with label and value keys for more complex data structures.

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	SelectProps<ItemT	--	Inherits properties from SelectProps<ItemT
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