Select

Single select picker component for primitive values or objects.
Supports default values, clearable selection, custom items, and full styling.

The following option data will be used in the below demos:

const OPTIONS = Array(25)
  .fill(0)
  .map((_, i) => ({
    label: `Option ${i}`,
    value: i,
    disabled: i % 4 === 0,
  }));

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

Use defaultValue to preselect an item when the component mounts.

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

Clearable

Enable the clearable prop to allow users to remove all selected options at once from the right clear icon.

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

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

Custom Item

Use renderItem prop to render each option with custom layout.

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

Use inputProps prop to customize the input container styling.

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

Custom Picker Style

Use pickerProps prop to customize the dropdown or modal container styling.

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

Disabled

Use the disabled prop to make the select input non-interactive.

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	--