Component

MultiSelect

Searchable multi-select dropdown with badges, disabled items, and async loading support.

←→

React Native

Multi select

Searchable dropdown with multiple selected values.

Select teams

Support

Selected: design

import { useState } from 'react';
import { MultiSelect } from '@sohantalukder/rn-kit';

const items = [
  { key: 'design', value: 'Design' },
  { key: 'mobile', value: 'Mobile' },
  { key: 'backend', value: 'Backend', disabled: true },
];

export function SkillPicker() {
  const [selected, setSelected] = useState<(string | number)[]>([]);

  return (
    <MultiSelect
      label="Skills"
      placeholder="Choose skills"
      data={items}
      selectedValues={selected}
      setSelected={(values) => setSelected(values ?? [])}
      save="key"
      search
    />
  );
}

Live component

defaultcontrolledwith disabled itemsloading

Use for longer option sets.
Keep selected badges scannable.

Usage

import { MultiSelect } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { MultiSelect } from '@sohantalukder/rn-kit';

const items = [
  { key: 'design', value: 'Design' },
  { key: 'mobile', value: 'Mobile' },
  { key: 'backend', value: 'Backend', disabled: true },
];

export function SkillPicker() {
  const [selected, setSelected] = useState<(string | number)[]>([]);

  return (
    <MultiSelect
      label="Skills"
      placeholder="Choose skills"
      data={items}
      selectedValues={selected}
      setSelected={(values) => setSelected(values ?? [])}
      save="key"
      search
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

dataSelectItem[][]Option collection used to render selectable dropdown rows.

selectedValues(string | number)[][]Current selected values for controlled multi-select usage.

setSelected(value) => void-Receives the selected option value when the user chooses an item.

searchbooleantrueShows a text input for filtering dropdown options.

placeholderstring-Hint text shown before a value is entered or selected.

Theme

MultiSelect reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
controlled
with disabled items
loading

Best Practices

Use for longer option sets.
Keep selected badges scannable.