Skip to main content
Dropdown select with optional search, multi-select, and icon support. Auto-closes when clicking outside. Displays selected items as comma-separated text.

​
Import

import { Dropdown } from '@adoptaunabuelo/react-components';

​
Props

​
id
string
required
Unique identifier required for click-outside detection
​
placeholder
string
required
Placeholder text shown when nothing is selected
​
options
Array<OptionProps>
required
Array of selectable options
​
type
'single' | 'multiple'
default:"single"
Selection mode: single for one item, multiple for checkboxes
​
selectedOptions
Array<OptionProps>
Currently selected options (controlled component)
​
onChange
(array: Array<OptionProps>) => void
Callback fired when selection changes
​
onSearchChange
(text: string) => void
Callback fired when search input changes, enables search functionality
​
menuPosition
'bottom' | 'top'
default:"bottom"
Position of dropdown menu relative to trigger
​
style
React.CSSProperties
Custom styles for the container
​
menuStyle
React.CSSProperties
Custom styles for the dropdown menu container
​
optionStyle
React.CSSProperties
Custom styles for individual option items

​
OptionProps

​
id
string
required
Unique identifier for the option
​
title
string
Display text for the option
​
icon
React.ReactElement
Optional icon displayed before title

​
Usage

<Dropdown
  id="category-dropdown"
  placeholder="Select categories"
  type="multiple"
  options={categories}
  selectedOptions={selected}
  onSearchChange={(text) => filterOptions(text)}
  onChange={(items) => setSelected(items)}
/>

​
Notes

  • Automatically closes when clicking outside the dropdown
  • Search functionality only enabled when onSearchChange is provided
  • In multiple mode, shows checkboxes for each option
  • In single mode, shows checkmark for selected option
  • Selected items displayed as comma-separated list in trigger
  • Max height of menu is 250px with scrolling
  • Chevron icon indicates open/closed state

Build docs developers (and LLMs) love

Get started for freeTalk to us