Select — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add select

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Select } from 'orn-ui/select';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Elegir una opción de una lista cerrada. Para dos o tres opciones con ícono, OptionCard se lee mejor.
options / selectedValue — Controlado y genérico: el valor conserva su tipo, no se fuerza a string.
error / required — Mismo patrón que Input, así un formulario que mezcla ambos queda consistente.
isLoading — Para opciones que llegan de la red.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Default

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

Required

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

Error

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

Loading

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

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

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>`	—	—