# rn-select
URL: /docs/native/components/select

Dropdown select component with modal picker for option selection.

## Installation

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

## Usage

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

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

```

## 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'` |