SelectList

SelectList is the searchable React Native list inside SelectPicker, as a standalone inline component. Use it in settings screens, onboarding steps, or your own sheets and modals.

import { SelectList } from '@elik56a/react-native-pickers';

Result

Loading...

Live Editor

import { useState } from 'react';
import { View } from 'react-native';
import { SelectList } from '@elik56a/react-native-pickers';

const themes = [
  { label: 'System', value: 'system', description: 'Follow the device setting' },
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
];

export default function Example() {
  const [mode, setMode] = useState<string | null>('system');
  return (
    <View style={{ borderWidth: 1, borderColor: '#E8E4DC', borderRadius: 16, paddingVertical: 8 }}>
      <SelectList options={themes} value={mode} onChange={setMode} />
    </View>
  );
}

Try the props

multiplesearchableshowCheckmarks

<SelectList
  options={countries}
  value={value}
  onChange={setValue}
  searchable
/>

Multiple, with search

Result

Loading...

Live Editor

import { useState } from 'react';
import { SelectList } from '@elik56a/react-native-pickers';

const toppings = ['Mozzarella', 'Basil', 'Mushrooms', 'Olives', 'Pepperoni', 'Jalapeños', 'Pineapple', 'Onion', 'Ham', 'Rocket'].map((t) => ({
  label: t,
  value: t,
  group: ['Pepperoni', 'Ham'].includes(t) ? 'Meat' : 'Veggie',
}));

export default function Example() {
  const [picked, setPicked] = useState<string[]>(['Mozzarella', 'Basil']);
  return <SelectList multiple options={toppings} value={picked} onChange={setPicked} maxSelected={5} listHeight={320} />;
}

Behaviour

• Controlled only: pass value and update it in onChange.
• In single mode, tapping an option calls onChange(value, option), including when it's already selected (there's no deselect).
• In multiple mode, taps toggle. onChange(values, options) keeps selection order (appended at the end).
• With maxSelected reached, unselected options become disabled until something is deselected.
• Without listHeight, the list grows with its content. Inside a scroll view or sheet, give it a listHeight so it scrolls on its own.
• Search state is internal and resets when the list unmounts.

Props

Prop	Type	Default	Description
options	ReadonlyArray<SelectOption<T>>	required	See options.
multiple	boolean	false	Multi-select.
value	T | null · T[]	—	Selection.
onChange	(value: T, option) => void · (values: T[], options) => void	—	Single · multiple.
maxSelected	number	—	Multiple only.
searchable	boolean	options.length > 8	Show the search field.
query	string	—	Controlled search query, for filtering from your own input. Hides the built-in search field.
searchPlaceholder	string	'Search'	Search hint and its accessibility label.
filterOption	(option: SelectOption<T>, query: string) => boolean	defaultFilter	Custom filter.
renderOption	(info: SelectRenderOptionInfo<T>) => ReactNode	—	Custom row content.
renderGroupHeader	(group: string, theme: PickerTheme) => ReactNode	—	Custom section header.
emptyText	string	'No results'	Empty-state text.
showCheckmarks	boolean	true	✓ (single) / checkbox (multiple).
isEqual	(a: T, b: T) => boolean	Object.is	Value equality.
listHeight	number	—	Fixed height for the scrolling list.
autoFocusSearch	boolean	false	Focus the search on mount.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<SelectSlot>	—	Slots below.
theme	DeepPartial<PickerTheme>	—	Theme override.
testID	string	—	Test ID.

Slots

Slot	Element
container	Outer view
search	Search field wrapper
searchInput	The TextInput
list	The FlatList
groupHeader / groupHeaderText	Section header
option	Each row
selectedOption	Selected rows (merged after option)
optionLabel / selectedOptionLabel	Row label
optionDescription	Second line
check	✓ or checkbox
empty / emptyText	Empty state

Types

interface SelectRenderOptionInfo<T> { option: SelectOption<T>; selected: boolean; disabled: boolean; theme: PickerTheme }
type SelectValueProps<T> =
  | { multiple?: false; value?: T | null; onChange?: (value: T, option: SelectOption<T>) => void }
  | { multiple: true; value?: T[]; onChange?: (value: T[], options: SelectOption<T>[]) => void; maxSelected?: number };