MultinairePickerButton

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

Basic Usage

import { MultinairePickerButton } from '@multinaire/multinaire-design';

<MultinairePickerButton
  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
onPress	() => void	—	Press handler that opens the picker
onClear	() => void	—	Callback invoked when the user clears the current selection

Examples

Basic Picker

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

With Clear Button

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

With Leading Icon

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

With Error

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

With ListPicker

<MultinairePickerButton
  title="Country"
  placeholder="Select country"
  value={country?.name}
  onPress={() => setVisible(true)}
/>

<MultinaireListPicker
  type="dropdown"
  visible={visible}
  items={countries}
  selectedItem={country}
  onChange={(item) => {
    setCountry(item);
    setVisible(false);
  }}
/>