Import
import { Select } from '@adoptaunabuelo/react-components';
Usage
<Select
id="language-select"
options={[
{ label: "English", icon: <FlagIcon /> },
{ label: "Spanish", icon: <FlagIcon /> }
]}
selectedItem={currentLanguage}
onChange={(option) => setLanguage(option)}
/>
Props
Unique identifier required for click-outside detection
options
Array<OptionProps>
required
Array of selectable options
Current selected option (controlled component)
onChange
(option: OptionProps) => void
Callback fired when selection changes
Custom styles for the dropdown options container
Hide the selected item label (icon-only mode)
Custom styles for the select container
OptionProps
Display text for the option
Optional icon displayed before label
Features
- Auto-closes when clicking outside using window event listeners
- Displays chevron up/down indicator based on menu state
- Scrollable dropdown with max height of 220px
- Hover effects on options
- Icon support for visual selection cues
- Height: 36px, border radius: 4px
- Supports controlled and uncontrolled modes
- Defaults to first option if no selectedItem provided
Examples
Basic Select
<Select
id="fruit-select"
options={[
{ label: "Apple" },
{ label: "Banana" },
{ label: "Orange" }
]}
onChange={(option) => console.log(option.label)}
/>
With Icons
import { Globe, Flag } from 'lucide-react';
<Select
id="language-select"
options={[
{ label: "English", icon: <Flag /> },
{ label: "Spanish", icon: <Globe /> }
]}
selectedItem={language}
onChange={(option) => setLanguage(option)}
/>
Icon Only Mode
<Select
id="icon-select"
options={[
{ label: "Settings", icon: <SettingsIcon /> },
{ label: "Profile", icon: <UserIcon /> }
]}
hideTitle
onChange={handleChange}
/>
Custom Styling
<Select
id="styled-select"
options={options}
style={{ width: '200px' }}
optionStyle={{ maxHeight: '150px' }}
onChange={handleChange}
/>
