PickerButton

Dropdown trigger button that displays a selected value and opens a picker.

Basic Usage

import { PickerButton } from '@multinaire/expo-ui';

<PickerButton
  placeholder="Select option"
  value={selectedLabel}
  onPress={() => setPickerVisible(true)}
/>

Props

Prop	Type	Default	Description
placeholder	string	—	Placeholder text shown when the field is empty
value	string	—	Current value of the input
title	string	—	Field label displayed above the input
required	boolean	false	Mark the field as required. Displays a visual indicator
allowClear	boolean	false	Show a clear (×) button to reset the value
leading	IconName | ReactElement	—	Leading icon name or a custom React element rendered at the start of the input
trailing	IconName | ReactElement	—	Trailing icon name or a custom React element rendered at the end of the input
extra	ReactElement	—	Extra element rendered at the trailing end of the label row (e.g. a "Forgot password?" link)
errorText	string	—	Error message displayed below the input
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
testID	string	—	Test identifier for UI automation
onPress	() => void	—	Press handler that opens the picker
onClear	() => void	—	Callback invoked when the user clears the current selection

Examples

Basic Picker

<PickerButton
  title="Country"
  placeholder="Select a country"
  value={selectedCountry?.name}
  onPress={() => setCountryPickerVisible(true)}
/>

With Clear Button

<PickerButton
  title="Category"
  placeholder="Select category"
  value={category}
  allowClear
  onPress={() => setCategoryPickerVisible(true)}
  onClear={() => setCategory(null)}
/>

With Leading Icon

<PickerButton
  leading="Calendar"
  placeholder="Select date"
  value={formattedDate}
  onPress={() => setDatePickerVisible(true)}
/>

With Error

<PickerButton
  title="Required Field"
  required
  placeholder="Please select"
  value={value}
  errorText={!value ? 'This field is required' : undefined}
  onPress={openPicker}
/>

With ListPicker

ListPicker has no visibility of its own — it renders inside a Popup, and the PickerButton is that popup's toggle. Spread the render-prop argument onto the button so pressing it opens the popup.

<Popup
  title="Select country"
  renderToggleButton={(props) => (
    <PickerButton
      title="Country"
      placeholder="Select country"
      trailing="ArrowDown2"
      value={country?.name}
      {...props}
    />
  )}
>
  <ListPicker
    type="dropdown"
    items={countries}
    selectedItem={country}
    onChange={setCountry}
  />
</Popup>