Select

Select renders a dropdown list for picking one or more items. It supports grouping, multi-selection, labels, and captions.

Import

import { Select, SelectGroup, SelectItem } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { Layout, Select, SelectGroup, SelectItem, IndexPath } from '@ui-kitten/components';

const SelectExample = () => {
  const [selectedIndex, setSelectedIndex] = useState(new IndexPath(0));

  const options = ['Option 1', 'Option 2', 'Option 3'];
  const displayValue = options[selectedIndex.row];

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <Select
        label="Choose an option"
        caption="Pick one from the list"
        selectedIndex={selectedIndex}
        onSelect={(index) => setSelectedIndex(index)}
        value={displayValue}
      >
        {options.map((title, index) => (
          <SelectItem key={index} title={title} />
        ))}
      </Select>
    </Layout>
  );
};

Props

Select

Property	Type	Default	Description
selectedIndex	IndexPath | IndexPath[]	undefined	The selected item index (or array for multi-select). When the list opens it scrolls to the selected option (the first one for multi-select, the group row for a grouped option); a listProps.initialScrollIndex takes over.
onSelect	(index: IndexPath | IndexPath[]) => void	-	Called when an item is selected.
placeholder	string | number | (props) => ReactElement	'Select Option'	Placeholder displayed when no item is selected.
label	string | number | (props) => ReactElement	undefined	Label displayed above the select.
caption	string | number | (props) => ReactElement	undefined	Caption displayed below the select.
multiSelect	boolean	false	Whether multiple items can be selected.
placement	string | PopoverPlacement	'bottom'	Position of the options list relative to the control (top, bottom start, left end, ...).
popoverProps	Partial<Omit<PopoverProps, 'visible' | 'anchor' | 'children' | 'placement'>>	undefined	Props for the options Popover (placement is the Select prop): fullWidth (defaults to true; false sizes the list by its content), blocking, anchorContainerStyle, backdropStyle, style. onBackdropPress runs before the list closes.
value	string | number | (props) => ReactElement	undefined	Display value text or render function.
children	SelectItem[] | SelectGroup[]	-	Select items and groups.
accessoryLeft	(props) => ReactElement	undefined	Render function for the accessory shown at the start of the control.
accessoryRight	(props) => ReactElement	undefined	Render function for the accessory shown at the end of the control. Defaults to the chevron.
status	'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'	'basic'	Status of the control.
size	'small' | 'medium' | 'large'	'medium'	Size of the control.
appearance	'default'	'default'	Appearance defined in the Eva mapping.
listRef	Ref<ListRef>	undefined	Ref of the List that renders the options. Set while the options are shown; call scrollToIndex from onFocus.
listProps	Omit<ListProps, 'data' | 'renderItem'>	undefined	Props forwarded to the options List, e.g. getItemLayout (needed by scrollToIndex for rows not rendered yet) or initialScrollIndex. Indices count the direct children of Select; a SelectGroup is one row.

Select exposes an imperative API through a ref typed as SelectRef, with focus(), blur(), isFocused() and clear().

SelectGroup

Property	Type	Default	Description
title	string | number | (props) => ReactElement	-	Group title text or render function.
children	SelectItem[]	-	Nested select items.
accessoryLeft	(props) => ReactElement	undefined	Render function for the accessory shown at the start of the title.
accessoryRight	(props) => ReactElement	undefined	Render function for the accessory shown at the end of the title.

SelectItem

Property	Type	Default	Description
title	string | number | (props) => ReactElement	-	Item title text or render function.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory.
accessoryRight	(props) => ReactElement	undefined	Render function for the right accessory.
selected	boolean	false	Whether the item is rendered as selected. Managed by Select.
appearance	'default' | 'grouped'	'default'	Appearance defined in the Eva mapping. grouped is applied to items inside a SelectGroup.

SelectItem also accepts all standard React Native TouchableOpacity props, including disabled. Its onPress is called with (descriptor: SelectItemDescriptor, event?: GestureResponderEvent) rather than the plain press event.

Storybook

Live examples coming soon via Storybook.