Photonix

DropdownList

Display a list of selectable items.

Preview

Design
Engineering
Growth
Support
Usage
"use client";

import { useState } from 'react';
import { Box, DropdownList } from '@photonix/ultimate';

const items = [
    { value: 'design', label: 'Design' },
    { value: 'engineering', label: 'Engineering' },
    { value: 'growth', label: 'Growth' },
    { value: 'support', label: 'Support' },
];

export default function DropdownListBasicExample() {
    const [value, setValue] = useState('design');

    return (
        <Box w={320} maxW="100%">
            <DropdownList items={items} value={value} onChange={(next) => setValue(String(next))} />
        </Box>
    );
}

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
selectAllLabel
string
-
Label for the synthetic first item that selects all visible options in multi mode
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.

Option 1
Option 2
Option 3
Multi-Select
"use client";

import { Box, DropdownList } from '@photonix/ultimate';

export default function DropdownListMultiExample() {
    return (
        <Box maxW={300}>
            <DropdownList
                mode="multi"
                value={['1', '3']}
                onChange={() => undefined}
                items={[
                    { value: '1', label: 'Option 1' },
                    { value: '2', label: 'Option 2' },
                    { value: '3', label: 'Option 3' },
                ]}
            />
        </Box>
    );
}

Multi-Select with Select All

Add a first item that selects or clears all visible options below it.

Select all teams
Design
Engineering
Growth
Support
Multi-Select with Select All
"use client";

import { useState } from 'react';
import { Box, DropdownList } from '@photonix/ultimate';

const items = [
    { value: 'design', label: 'Design' },
    { value: 'engineering', label: 'Engineering' },
    { value: 'growth', label: 'Growth' },
    { value: 'support', label: 'Support' },
];

export default function DropdownListSelectAllExample() {
    const [value, setValue] = useState<string[]>(['design', 'growth']);

    return (
        <Box maxW={300}>
            <DropdownList
                mode="multi"
                selectAllLabel="Select all teams"
                value={value}
                onChange={(next) => setValue(next as string[])}
                items={items}
            />
        </Box>
    );
}

Searchable

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

Ctrl + /
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Searchable
"use client";

import { Box, DropdownList } from '@photonix/ultimate';

export default function DropdownListSearchExample() {
    return (
        <Box maxW={300}>
            <DropdownList
                value=""
                onChange={() => undefined}
                items={Array.from({ length: 15 }).map((_, i) => ({
                    value: String(i),
                    label: `Option ${i + 1}`,
                }))}
            />
        </Box>
    );
}

Small Size (with all variants)

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

New File
New Folder
Copy
Delete
Small Size (with all variants)
"use client";

import { Box, DropdownList } from '@photonix/ultimate';
import { DocumentOutline as Document, FolderOutline as Folder, TrashOutline as Delete, DownloadOutline as Download } from '@photonix/icons';

export default function DropdownListSmallExample() {
    return (
        <Box maxW={300}>
            <DropdownList
                size="sm"
                value=""
                onChange={() => undefined}
                items={[
                    { value: 'new-file', label: 'New File', icon: <Document size={20} /> },
                    { value: 'new-folder', label: 'New Folder', icon: <Folder size={20} />, divider: true },
                    { value: 'copy', label: 'Copy', icon: <Download size={20} /> },
                    { value: 'delete', label: 'Delete', icon: <Delete size={20} />, disabled: true },
                ]}
            />
        </Box>
    );
}

On this page

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