Photonix

DropdownList

Display a list of selectable items.

Preview

Usage
import { DropdownList } from '@photonix/ultimate';

const [value, setValue] = useState('');

<DropdownList
  value={value}
  onChange={setValue}
  items={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2', divider: true },
    { value: '3', label: 'Option 3' },
  ]}
/>

Component API

DropdownList

Prop
Type
Default
Description
items
DropdownListItem[]
-
List of items to display
value
string | string[]
[]
Currently selected value(s)
size
"sm" | "md"
'md'
Size of the items
mode
"single" | "multi"
'single'
Selection mode
searchPlaceholder
string
'Search'
Search placeholder
onChange
((value: string | string[]) => void)
-
Callback when selection changes
maxHeight
string | number
400
Max height for the list
showDividers
boolean
false
Show dividers between items
className
string
-
Additional class name
style
React.CSSProperties
-
Additional styles

Variants

Multi-Select

Allow selecting multiple options.

Multi-Select
<DropdownList
  mode="multi"
  value={['1', '3']}
  items={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ]}
/>

Small Size (with all variants)

Use the size prop to render smaller items. Supports icons, dividers, and disabled states.

Small Size (with all variants)
<DropdownList
  size="sm"
  items={[
    { value: 'new-file', label: 'New File', icon: <Document size={20} /> },
    { value: 'new-folder', label: 'New Folder', icon: <Folder size={20} />, divider: true },
    { value: 'delete', label: 'Delete', icon: <Delete size={20} />, disabled: true },
  ]}
/>

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System