Select — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add select

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — Picking one option from a closed list. For two or three options with an icon, OptionCard reads better.
options / selectedValue — Controlled and generic: the value keeps its type, it is not forced into a string.
error / required — Same pattern as Input, so a form mixing both stays consistent.
isLoading — For options that arrive from the network.

Demo clip not recorded yet — see MEDIA.md

Variants

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 />

Full demo source

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

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`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	Adds a search box inside the dropdown.
`searchPlaceholder?`	`string`	—	—
`maxHeight?`	`number`	280	Maximum height of the dropdown, if the available space allows it.
`onOpenChange?`	`(open: boolean) => void`	—	—
`containerStyle?`	`StyleProp<ViewStyle>`	—	—