Select

Single Select picker component for primitive and list of objects.

Usage

function SelectUsage() {
  const [selectedValue, setSelectedValue] = useState<number | undefined>(-1)

  return (
    <Select
      options={OPTIONS}
      value={selectedValue}
      onValueChange={(value) => setSelectedValue(value)}
    />
  )
}

Default Value

function SelectDefaultValue() {
  return <Select options={OPTIONS} defaultValue={3} />
}

SelectClearable

function SelectClearable() {
  const [selectedValue, setSelectedValue] = useState<number | undefined>(-1)

  return (
    <Select
      options={OPTIONS}
      value={selectedValue}
      clearable
      onValueChange={(value) => setSelectedValue(value)}
    />
  )
}

Disabled

function SelectDisabled() {
  const [selectedValue, setSelectedValue] = useState<number | undefined>(-1)

  return (
    <Select
      disabled
      options={OPTIONS}
      value={selectedValue}
      onValueChange={(value) => setSelectedValue(value)}
    />
  )
}

List of Objects

function SelectObjectOptions() {
  const FRUIT_LIST = [
    {
      label: 'Red Apple',
      value: {id: 1, name: 'Apple'},
    },
    {
      label: 'Orange Orange',
      value: {id: 2, name: 'Orange'},
    },
    {
      label: 'Yellow Mango',
      value: {id: 3, name: 'Mango'},
    },
    {
      label: 'Yellow Papaya',
      value: {id: 4, name: 'Papaya'},
    },
  ]

  const [selectedValue, setSelectedValue] = useState<
    (typeof FRUIT_LIST)[0]['value'] | undefined
  >(undefined)

  return (
    <Select
      options={FRUIT_LIST}
      value={selectedValue}
      onValueChange={(value, item) => {
        setSelectedValue(value)
        alert(`Selected Value\n${JSON.stringify(item)}`)
      }}
    />
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	BaseUIProps	--	Inherits properties from BaseUIProps
options	SelectItemT<ItemT>[]	--	List of options
value	ItemT	--	Selected value from the data objecti.e. pass the `item.value` object that you get from `onValueChange`
defaultValue	ItemT	--	Default value from the item.value
displayValue	string	--	Set custom display value
onValueChange	(selectedValue?: ItemT, selectedItem?: SelectItemT<ItemT>, index?: number) => void	--	Callback on every value change
searchable	boolean	--	Set it true to open keyboard and show search resultsTODO: add support for this
clearable	boolean	--	Show the close icon at right to clear the selection
pickerHeight	number	--	Height of the popover shown for selecting the item
pickerProps	Partial<Omit<FlatListProps<SelectItemT<ItemT>>, "data">>	--	Picker flat list props
renderItem	ListRenderItem<SelectItemT<ItemT>>	--	Render a custom view for picker item
inputProps	Omit<TextInputProps, "defaultValue" | "value">	--	Input props
status	BlossomStatus	primary	--
size	BlossomSize	medium	--