Component

SelectList

Searchable single-select dropdown with default option and disabled item support.

←→

React Native

Select list

Searchable single-select dropdown.

Select a team

Support

Selected: design

import { useState } from 'react';
import { SelectList, Text } from '@sohantalukder/rn-kit';

const items = [
  { key: 'draft', value: 'Draft' },
  { key: 'active', value: 'Active' },
  { key: 'archived', value: 'Archived', disabled: true },
];

export function StatusSelect() {
  const [status, setStatus] = useState<string | number | undefined>();

  return (
    <>
      <SelectList
        label="Status"
        placeholder="Select status"
        data={items}
        setSelected={setStatus}
        save="key"
        search
      />
      <Text color="secondary">Selected: {status ?? 'None'}</Text>
    </>
  );
}

Live component

defaultsearchabledisabled itemsno search

Use when options do not need to be visible all at once.
Provide a meaningful placeholder.

Usage

import { SelectList } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { SelectList, Text } from '@sohantalukder/rn-kit';

const items = [
  { key: 'draft', value: 'Draft' },
  { key: 'active', value: 'Active' },
  { key: 'archived', value: 'Archived', disabled: true },
];

export function StatusSelect() {
  const [status, setStatus] = useState<string | number | undefined>();

  return (
    <>
      <SelectList
        label="Status"
        placeholder="Select status"
        data={items}
        setSelected={setStatus}
        save="key"
        search
      />
      <Text color="secondary">Selected: {status ?? 'None'}</Text>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

dataSelectItem[][]Option collection used to render selectable dropdown rows.

setSelected(value) => void-Receives the selected option value when the user chooses an item.

defaultOptionSelectItem-Initial selected option shown before the user chooses another value.

searchbooleantrueShows a text input for filtering dropdown options.

placeholderstring-Hint text shown before a value is entered or selected.

Theme

SelectList reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
searchable
disabled items
no search

Best Practices

Use when options do not need to be visible all at once.
Provide a meaningful placeholder.