Photonix UI - React Components, Templates & Figma Design System

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' },
  ]}
/>

Searchable

Automatically shows a search bar when there are 10 or more items.

Searchable

<DropdownList
  items={[
    ...Array.from({ length: 15 }).map((_, i) => ({
      value: String(i),
      label: `Option ${i + 1}`
    }))
  ]}
/>

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 },
  ]}
/>

DropdownList

Preview

Component API

DropdownList

Variants

Multi-Select

Searchable

Small Size (with all variants)

On this page