Select

Single Select picker component for primitive and list of objects.

Usage

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

  return (
    <Select
      label="Select Label"
      placeholder="Select An Option"
      options={OPTIONS}
      value={selectedValue}
      status="primary"
      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)}
    />
  )
}

SelectCustomItem

function SelectCustomItem() {
  return (
    <Select
      options={OPTIONS}
      renderItem={({item, index}) => (
        <Text
          typography="h6"
          status={index % 2 === 0 ? 'primary' : 'accent'}
          style={{padding: 8}}>
          {item.label}
        </Text>
      )}
    />
  )
}

Custom Style

function SelectCustomStyle() {
  return (
    <Select
      options={OPTIONS}
      label="Custom Select Label"
      inputProps={{
        inputContainerStyle: {
          backgroundColor: 'cyan',
          borderColor: 'blue',
          borderWidth: 2,
        },
      }}
    />
  )
}

Custom Picker Style

function SelectCustomPickerStyle() {
  return (
    <Select
      options={OPTIONS}
      label="Custom Select Label"
      placeholder="Custom Select Label"
      pickerProps={{
        style: {
          backgroundColor: 'yellow',
        },
      }}
    />
  )
}

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
isLoading	boolean	--	Set it true to show the loader
onValueChange	(selectedValue?: ItemT, selectedItem?: SelectItemT<ItemT>, index?: number) => void	--	Callback on every value change
onClearPress	() => void	--	On clear callback
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">	--	Change the style of the input and it's container
status	BlossomStatus	primary	--
size	BlossomSize	medium	--