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).
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.
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.

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.