Select

Overview

Select is a customizable React Native component for selecting options from a dropdown. This component converts any array of objects into an array of options compatible with the label and value fields, facilitating use with different data sources.

Preview

Preview

Light mode

Dark mode

Code

<Select
	label="Choose an option"
	options={[
		{id: 1,name:'Option 1'},
		{id: 2,name:'Option 2'},
	]}
	labelKey="name"
	valueKey="id"
	selectedValue={selectedOption}
	onSelect={value  =>  setSelectedOption(value)}
/>

Installation

CLI

npx  nativecn-ui  add  Select

Manual

1. First Step

   Include Select.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

Properties

• label?: string (optional) - Text displayed as selector label.

• labelClasses?: string (optional) - Style classes for the label.

• selectClasses?: string (optional) - Style classes for the selector button.

• options: any[] (required) - Array of options that will be converted into options compatible with label and value.

• onSelect: (value: string | number) => void (required) - Callback function called when an option is selected.

• selectedValue?: string | number (optional) - Currently selected value.

• placeholder?: string (optional) - Placeholder to display when nothing is selected (default: ‘Select an option’).

• labelKey: string (required) - Label key in the options object.

• valueKey: string (required) - Value key in the options object.

Usage

Basic usage with label

<Select
label="Choose an option"
options={[
{ id:  1, name:  'Option 1' },
{ id:  2, name:  'Option 2' },
]}

labelKey="name"
valueKey="id"
selectedValue={selectedOption}
onSelect={value  =>  setSelectedOption(value)}
/>

Usage

Basic usage with labelKey and valueKey

<Select
label="Choose an option"
options={[
{ description:  'Option A', code:  'A' },
{ description:  'Option B', code:  'B' },
]}

onSelect={setSelectedValue}
selectedValue={selectedValue}
labelKey="description"
valueKey="code"
/>

Usage with custom styles

<Select
label="Custom Option"
options={data}
onSelect={setSelectedValue}
selectedValue={selectedValue}
labelKey="name"
valueKey="id"
labelClasses="text-lg font-bold"
selectClasses="bg-amber-400"
/>