MultinaireListPicker

Selection modal for choosing from a list of options with optional search.

Basic Usage

import { MultinaireListPicker } from '@multinaire/multinaire-design';

<MultinaireListPicker
  type="dropdown"
  items={[
    { value: 'us', text: 'United States' },
    { value: 'uk', text: 'United Kingdom' },
    { value: 'ca', text: 'Canada' },
  ]}
  selectedItem={selectedCountry}
  onChange={(item) => setSelectedCountry(item)}
/>

Props

Prop	Type	Default	Description
type	'list' | 'dropdown'	—	Presentation style of the picker. 'list' shows items inline; 'dropdown' shows them in a modal
items	ListPickerItem[]	—	Array of selectable items
selectedItem	T	—	Currently selected item value
isLoading	boolean	false	Show loading skeleton items in place of the list
searchInputPlaceholder	string	—	Placeholder text for the search input
searchPredicate	(item, filter) => boolean	—	Custom filter predicate. Return true to keep the item visible for a given filter string
onChangeSearch	(filter: string) => void	—	Callback invoked on every keystroke in the search input
onChange	(item: T) => void	—	Callback invoked with the newly selected item value
onSearch	(filter: string) => void	—	Callback invoked when the user submits a search query

ListPickerItem

Property	Type	Description
value	T	The value associated with this item, passed to onChange when selected
text	string	Primary label text of the item
leading	IconName | ImageSource	Leading icon name or image source displayed at the start of the item

Examples

Dropdown Picker

<MultinaireListPicker
  type="dropdown"
  items={countries.map((c) => ({
    value: c.code,
    text: c.name,
    leading: { uri: c.flagUrl },
  }))}
  selectedItem={country}
  onChange={setCountry}
/>

List Picker with Search

<MultinaireListPicker
  type="list"
  items={users.map((u) => ({
    value: u.id,
    text: u.name,
    leading: { uri: u.avatarUrl },
  }))}
  selectedItem={selectedUser}
  searchInputPlaceholder="Search users..."
  searchPredicate={(item, filter) =>
    item.text.toLowerCase().includes(filter.toLowerCase())
  }
  onChange={setSelectedUser}
/>

With Icons

<MultinaireListPicker
  type="dropdown"
  items={[
    { value: 'card', text: 'Credit Card', leading: 'CreditCard' },
    { value: 'paypal', text: 'PayPal', leading: 'Wallet' },
    { value: 'bank', text: 'Bank Transfer', leading: 'Building' },
  ]}
  selectedItem={paymentMethod}
  onChange={setPaymentMethod}
/>

With Loading State

<MultinaireListPicker
  type="list"
  isLoading={isLoadingOptions}
  items={options}
  selectedItem={selected}
  onChange={setSelected}
/>

Server-Side Search

<MultinaireListPicker
  type="list"
  items={searchResults}
  selectedItem={selected}
  searchInputPlaceholder="Search..."
  onSearch={(query) => fetchSearchResults(query)}
  onChange={setSelected}
/>