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 when no value
value	string	-	Selected value to display
title	string	-	Label above the picker
required	boolean	false	Show required indicator
allowClear	boolean	false	Show clear button when has value
leading	MultinaireIcons | ReactElement	-	Leading icon or element
trailing	MultinaireIcons | ReactElement	-	Trailing icon or element
extra	ReactElement	-	Extra content beside title
errorText	string	-	Error message to display
flex	number	-	Flex value
margin	SpacingProps	-	Margin spacing
onPress	() => void	-	Press handler to open picker
onClear	() => void	-	Clear handler

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);
  }}
/>