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

Property	Type	Default	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.

Property	Type	Default	Description
`title`	`string`	-	Optional section title.
`options`	`PickerOption[]`	-	Array of options in section.

Accessibility

The Picker component is built with accessibility in mind:

Uses Modal component for proper focus management
Supports keyboard navigation within the modal
Provides proper touch targets for mobile devices
Uses semantic color contrast for text and backgrounds
Supports screen reader announcements

ParallaxScrollView Popover

On This Page

Installation Usage Examples Default With Sections Multiple Selection Searchable With Icons and Labels Variants Form Integration Advanced Features API Reference Picker PickerOption PickerSection Accessibility