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'	-	Picker presentation type
items	ListPickerItem[]	-	Array of selectable items
selectedItem	T	-	Currently selected item value
isLoading	boolean	false	Show loading state
searchInputPlaceholder	string	-	Search input placeholder
searchPredicate	(item, filter) => boolean	-	Custom search filter
onChange	(item: T) => void	-	Selection handler
onSearch	(filter: string) => void	-	Search text handler

ListPickerItem

Property	Type	Description
value	T	Item value
text	string	Display text
leading	MultinaireIcons | ImageSource	Leading icon or image

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