# Select

> Organism — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add select
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Select } from 'orn-ui/select';
```

Depende de: core (theme + icons)

## Variantes

### Default

```tsx
<Select label="Payment method" options={OPTIONS} selectedValue={value} onSelect={setValue} />
```

### Required

```tsx
<Select label="Payment method" required options={OPTIONS} selectedValue={required} onSelect={setRequired} />
```

### Error

```tsx
<Select label="Payment method" options={OPTIONS} selectedValue={undefined} onSelect={() => {}} error="Required" />
```

### Loading

```tsx
<Select label="Payment method" options={OPTIONS} selectedValue={undefined} onSelect={() => {}} isLoading />
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  { label: 'Default', content: <Select label="Payment method" options={OPTIONS} selectedValue={value} onSelect={setValue} /> },
  {
    label: 'Required',
    content: <Select label="Payment method" required options={OPTIONS} selectedValue={required} onSelect={setRequired} />,
  },
  {
    label: 'Error',
    content: <Select label="Payment method" options={OPTIONS} selectedValue={undefined} onSelect={() => {}} error="Required" />,
  },
  {
    label: 'Loading',
    content: <Select label="Payment method" options={OPTIONS} selectedValue={undefined} onSelect={() => {}} isLoading />,
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `label?` | `string` | — | — |
| `required?` | `boolean` | false | — |
| `options` | `SelectOption<T>[]` | — | — |
| `selectedValue` | `string \| number` | — | — |
| `onSelect` | `(value: T) => void` | — | — |
| `placeholder?` | `string` | — | — |
| `error?` | `string` | — | — |
| `isLoading?` | `boolean` | false | — |
| `disabled?` | `boolean` | false | — |
| `searchable?` | `boolean` | false | Agrega un buscador dentro del desplegable. |
| `searchPlaceholder?` | `string` | — | — |
| `maxHeight?` | `number` | 280 | Alto máximo del desplegable, si el espacio disponible lo permite. |
| `onOpenChange?` | `(open: boolean) => void` | — | — |
| `containerStyle?` | `StyleProp<ViewStyle>` | — | — |