Select

Dropdown select component with modal picker for option selection.

iOSAndroid

Preview Select on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-select

Usage

import { Select } from '@/components/docyrus-native/select';

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
];

<Select
  options={options}
  value={fruit}
  onValueChange={setFruit}
  title="Select Fruit"
/>

API Reference

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	Array of options (required)
`value`	`string`	—	Selected option value
`onValueChange`	`(value: string) => void`	—	Selection change handler
`placeholder`	`string`	`'Select...'` (translated)	Placeholder text
`disabled`	`boolean`	`false`	Disable interaction
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`title`	`string`	—	Modal header title
`className`	`string`	—	Trigger CSS classes
`textClassName`	`string`	—	Trigger text CSS classes
`accessibilityLabel`	`string`	—	Accessibility label

SelectOption

Property	Type	Description
`label`	`string`	Display text
`value`	`string`	Option value
`disabled`	`boolean`	Disable this option

Translation Keys

Built-in copy is read through useUiTranslation() — provide these keys via <UiTranslationProvider>. Without a provider the English fallback is shown.

Key	English fallback	Used for
`ui.select.placeholder`	Select...	Trigger text when nothing is selected (`placeholder` prop wins)
`ui.select.currentSelection`	Current selection	Hint under the selected option
`ui.select.tapToChoose`	Tap to choose	Hint under the other options

Type Exports

Type	Description
`SelectProps`	Props for Select component
`SelectOption`	Option item type
`SelectSize`	`'sm' \| 'md' \| 'lg'`