Skip to main content
Select is a dropdown component that displays a list of options for users to choose from. It supports single and multiple selection, grouping, and custom rendering.

​
Import

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

​
Usage

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

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

  return (
    <Select
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}
      value='Option 1'
    >
      <SelectItem title='Option 1' />
      <SelectItem title='Option 2' />
      <SelectItem title='Option 3' />
    </Select>
  );
};

​
IndexPath

Select uses IndexPath to represent the selected option. For simple lists, IndexPath only has a row property. For grouped lists, it has both row and section properties. 
// Simple list
const index = new IndexPath(0); // First item

// Grouped list
const index = new IndexPath(0, 1); // First item in second group

​
Display Value

Use the value prop to control what’s displayed when an option is selected. 
import React from 'react';
import { Select, SelectItem, IndexPath } from '@ui-kitten/components';

const SelectWithValue = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(new IndexPath(0));
  
  const data = ['Option 1', 'Option 2', 'Option 3'];
  const displayValue = data[selectedIndex.row];

  return (
    <Select
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}
      value={displayValue}
    >
      {data.map((title, index) => (
        <SelectItem key={index} title={title} />
      ))}
    </Select>
  );
};

​
Multi-Select

Enable multiple selection with the multiSelect prop. 
import React from 'react';
import { Select, SelectItem, IndexPath } from '@ui-kitten/components';

const MultiSelect = () => {
  const [selectedIndices, setSelectedIndices] = React.useState([
    new IndexPath(0),
    new IndexPath(1),
  ]);

  const displayValue = selectedIndices
    .map(index => `Option ${index.row + 1}`)
    .join(', ');

  return (
    <Select
      multiSelect
      selectedIndex={selectedIndices}
      onSelect={indices => setSelectedIndices(indices)}
      value={displayValue}
    >
      <SelectItem title='Option 1' />
      <SelectItem title='Option 2' />
      <SelectItem title='Option 3' />
      <SelectItem title='Option 4' />
    </Select>
  );
};

​
Grouped Options

Use SelectGroup to organize options into categories. 
import { Select, SelectItem, SelectGroup, IndexPath } from '@ui-kitten/components';

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

  return (
    <Select
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}
      value='Option 1'
    >
      <SelectGroup title='Group 1'>
        <SelectItem title='Option 1' />
        <SelectItem title='Option 2' />
      </SelectGroup>
      <SelectGroup title='Group 2'>
        <SelectItem title='Option 3' />
        <SelectItem title='Option 4' />
      </SelectGroup>
    </Select>
  );
};

​
With Label and Caption

<Select
  label='Country'
  placeholder='Select a country'
  caption='Choose your country'
  selectedIndex={selectedIndex}
  onSelect={setSelectedIndex}
  value={selectedCountry}
>
  <SelectItem title='United States' />
  <SelectItem title='Canada' />
  <SelectItem title='Mexico' />
</Select>

​
Status

Use status for validation feedback. 
<Select
  status='success'
  label='Valid Selection'
  caption='Selection is valid'
  selectedIndex={selectedIndex}
  onSelect={setSelectedIndex}
>
  <SelectItem title='Option 1' />
  <SelectItem title='Option 2' />
</Select>

<Select
  status='danger'
  label='Invalid Selection'
  caption='Please select an option'
  placeholder='Select an option'
>
  <SelectItem title='Option 1' />
  <SelectItem title='Option 2' />
</Select>

​
Sizes

<Select size='small' placeholder='Small select' />
<Select size='medium' placeholder='Medium select' />
<Select size='large' placeholder='Large select' />

​
Accessories

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

const LocationIcon = (props) => <Icon {...props} name='pin' />;

<Select
  accessoryLeft={LocationIcon}
  placeholder='Select location'
>
  <SelectItem title='New York' />
  <SelectItem title='London' />
  <SelectItem title='Tokyo' />
</Select>

​
Disabled Options

<Select>
  <SelectItem title='Available Option' />
  <SelectItem title='Disabled Option' disabled />
  <SelectItem title='Another Available' />
</Select>

​
Props

​
selectedIndex
IndexPath | IndexPath[]
Index or array of indices of selected options. For grouped selects, use IndexPath with section property.
​
onSelect
(index: IndexPath | IndexPath[]) => void
Called when an option is selected. Receives IndexPath or array of IndexPath if multiSelect is true.
​
value
RenderProp<TextProps> | React.ReactText
String, number or function component to display for selected options. By default, calls toString() for each selected index.
​
multiSelect
boolean
default:"false"
Whether multiple options can be selected. If true, onSelect is called with array of IndexPath.
​
placeholder
RenderProp<TextProps> | React.ReactText
default:"'Select Option'"
Text to display when no option is selected.
​
label
RenderProp<TextProps> | React.ReactText
String, number or function component to render above the select.
​
caption
RenderProp<TextProps> | React.ReactText
String, number or function component to render below the select.
​
status
EvaStatus
default:"basic"
Status of the component. Can be basic, primary, success, info, warning, danger or control.
​
size
'small' | 'medium' | 'large'
default:"medium"
Size of the select.
​
accessoryLeft
RenderProp<Partial<ImageProps>>
Function component to render at the start. Expected to return an Image or Icon.
​
accessoryRight
RenderProp<Partial<ImageProps>>
Function component to render at the end. Expected to return an Image or Icon.
​
disabled
boolean
default:"false"
Whether the select is disabled.

​
Methods

​
focus()
() => void
Focuses the select and shows the options list.
​
blur()
() => void
Removes focus and hides the options list.
​
isFocused()
() => boolean
Returns whether the select is currently focused and options list is visible.
​
clear()
() => void
Clears the selection.

​
Form Examples

​
Country Selector

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

const CountrySelector = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(new IndexPath(0));
  
  const countries = [
    'United States',
    'Canada',
    'United Kingdom',
    'Australia',
    'Germany',
    'France',
  ];

  return (
    <Layout style={{ padding: 16 }}>
      <Select
        label='Country'
        placeholder='Select your country'
        selectedIndex={selectedIndex}
        onSelect={index => setSelectedIndex(index)}
        value={countries[selectedIndex.row]}
      >
        {countries.map((country, index) => (
          <SelectItem key={index} title={country} />
        ))}
      </Select>
    </Layout>
  );
};

​
Form with Validation

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

const ValidatedForm = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(null);
  const [error, setError] = React.useState('');

  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleSubmit = () => {
    if (!selectedIndex) {
      setError('Please select an option');
      return;
    }
    setError('');
    // Submit form
  };

  return (
    <>
      <Select
        label='Select an option *'
        placeholder='Choose one'
        selectedIndex={selectedIndex}
        onSelect={(index) => {
          setSelectedIndex(index);
          setError('');
        }}
        value={selectedIndex ? options[selectedIndex.row] : undefined}
        status={error ? 'danger' : 'basic'}
        caption={error}
      >
        {options.map((option, index) => (
          <SelectItem key={index} title={option} />
        ))}
      </Select>
      <Button onPress={handleSubmit}>SUBMIT</Button>
    </>
  );
};

​
Dynamic Options

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

const DynamicSelect = () => {
  const [category, setCategory] = React.useState(new IndexPath(0));
  const [product, setProduct] = React.useState(null);

  const categories = ['Electronics', 'Clothing', 'Books'];
  const productsByCategory = {
    0: ['Laptop', 'Phone', 'Tablet'],
    1: ['Shirt', 'Pants', 'Shoes'],
    2: ['Fiction', 'Non-fiction', 'Biography'],
  };

  const availableProducts = productsByCategory[category.row] || [];

  return (
    <>
      <Select
        label='Category'
        selectedIndex={category}
        onSelect={(index) => {
          setCategory(index);
          setProduct(null);
        }}
        value={categories[category.row]}
      >
        {categories.map((cat, index) => (
          <SelectItem key={index} title={cat} />
        ))}
      </Select>

      <Select
        label='Product'
        placeholder='Select a product'
        selectedIndex={product}
        onSelect={setProduct}
        value={product ? availableProducts[product.row] : undefined}
        disabled={!availableProducts.length}
      >
        {availableProducts.map((prod, index) => (
          <SelectItem key={index} title={prod} />
        ))}
      </Select>
    </>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us