Picker

A customizable dropdown picker component with search, sections, and multiple selection support.

Installation


pnpm dlx bna-ui add picker

Usage

import { Picker } from '@/components/ui/picker';

<Picker
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ]}
  value={selectedValue}
  onValueChange={setSelectedValue}
  placeholder='Select an option...'
/>

Examples

Default

With Sections

Multiple Selection

Searchable

With Icons and Labels

Variants

Form Integration

Advanced Features

API Reference

Picker

The main picker component that displays options in a modal.

Prop	Type	Default	Description
`haptic`	`boolean`	`true`	Whether to trigger haptic feedback when the picker opens and when an option is selected.
`options`	`PickerOption[]`	`[]`	Array of options to display.
`sections`	`PickerSection[]`	`[]`	Array of sections containing grouped options.
`value`	`string`	-	Currently selected value (single selection).
`values`	`string[]`	`[]`	Currently selected values (multiple selection).
`placeholder`	`string`	`"Select an option..."`	Placeholder text when no option is selected.
`error`	`string`	-	Error message to display.
`variant`	`"outline" \| "filled" \| "group"`	`"filled"`	Visual variant of the picker.
`onValueChange`	`(value: string) => void`	-	Callback when single selection changes.
`onValuesChange`	`(values: string[]) => void`	-	Callback when multiple selection changes.
`disabled`	`boolean`	`false`	Whether the picker is disabled.
`multiple`	`boolean`	`false`	Enable multiple selection mode.
`label`	`string`	-	Label text to display.
`icon`	`React.ComponentType<LucideProps>`	-	Icon component to display.
`rightComponent`	`ReactNode \| (() => ReactNode)`	-	Custom component to display on the right side.
`modalTitle`	`string`	-	Title for the modal header.
`searchable`	`boolean`	`false`	Enable search functionality.
`searchPlaceholder`	`string`	`"Search options..."`	Placeholder for search input.
`style`	`ViewStyle`	-	Additional styles for the picker container.
`inputStyle`	`TextStyle`	-	Additional styles for the input text.
`labelStyle`	`TextStyle`	-	Additional styles for the label text.
`errorStyle`	`TextStyle`	-	Additional styles for the error text.

PickerOption

Interface for individual picker options.

Prop	Type	Description
`label`	`string`	Display text for the option.
`value`	`string`	Unique value for the option.
`description`	`string`	Optional description text.
`disabled`	`boolean`	Whether the option is disabled.

PickerSection

Interface for grouping options into sections.

Prop	Type	Description
`title`	`string`	Optional section title.
`options`	`PickerOption[]`	Array of options in section.

Accessibility

Option rows expose accessibilityRole="menuitem" and accessibilityState={{ selected, disabled }} so screen readers announce selection state
Uses Modal for the options sheet, which traps interaction within it while open
The trigger meets the 44×44 minimum touch target on all variants

ParallaxScrollView Popover